/* Mobile Base */

@media screen and (max-width: 430px) {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html,
    body {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body {
        background: #030717 !important;
    }

    .hero {
        --hero-text-top: 18px;
        --hero-title-width: 404px;
        --hero-title-size: 24px;
        --hero-subtitle-width: 342px;
        --hero-subtitle-size: 11.4px;
        --hero-subtitle-top: 20px;
        --rocket-top: 258px;
        --rocket-height: 326px;
        --rocket-width: min(92vw, 382px);
        --guarantee-top: 492px;
        --guarantee-width: 330px;
        --guarantee-size: 11.8px;
        --features-top: 366px;
        --features-width: 340px;
        --feature-height: 56px;
        --feature-gap: 9px;
        --feature-radius: 14px;
        --feature-icon: 18px;
        --feature-font: 8.4px;
        --hero-buttons-width: 340px;
        --hero-button-height: 46px;
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 715px !important;
        padding: 18px 18px calc(34px + env(safe-area-inset-bottom)) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        background:
            radial-gradient(circle at 50% 38%, rgba(28, 78, 165, 0.16), transparent 30%),
            radial-gradient(circle at 50% 56%, rgba(9, 14, 38, 0.90), transparent 43%),
            radial-gradient(circle at 50% 68%, rgba(4, 7, 22, 0.98), transparent 58%),
            linear-gradient(
                180deg,
                #030717 0%,
                #040816 26%,
                #020512 58%,
                #030717 100%
            ) !important;
    }

    .hero::before {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: 210px !important;
        z-index: 1 !important;
        width: 132vw !important;
        height: 420px !important;
        transform: translateX(-50%) !important;
        background:
            radial-gradient(circle at 50% 44%, rgba(3, 7, 23, 0.18), transparent 35%),
            radial-gradient(circle at 50% 55%, rgba(2, 5, 17, 0.78), transparent 60%),
            linear-gradient(
                180deg,
                rgba(3, 7, 23, 0) 0%,
                rgba(3, 7, 23, 0.48) 34%,
                rgba(3, 7, 23, 0.92) 78%,
                rgba(3, 7, 23, 0) 100%
            ) !important;
        pointer-events: none !important;
    }

    .hero::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        bottom: 88px !important;
        z-index: 1 !important;
        width: 120vw !important;
        height: 230px !important;
        transform: translateX(-50%) !important;
        background:
            radial-gradient(circle at 50% 50%, rgba(42,127,255,0.06), transparent 34%),
            radial-gradient(circle at 50% 60%, rgba(116,77,255,0.06), transparent 48%) !important;
        filter: blur(8px) !important;
        opacity: 0.68 !important;
        pointer-events: none !important;
    }

    .header {
        position: relative !important;
        z-index: 20 !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        flex: 0 0 auto !important;
    }

    .logo {
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-size: 0 !important;
        line-height: 1 !important;
        letter-spacing: 0.35px !important;
        white-space: nowrap !important;
    }

    .logo::after {
        content: "SOPAX DA" !important;
        display: inline-block !important;
        font-size: 14px !important;
        line-height: 1.05 !important;
        font-weight: 900 !important;
        letter-spacing: 0.55px !important;
        color: currentColor !important;
        white-space: nowrap !important;
    }

    .logo-image {
        width: 44px !important;
        height: 44px !important;
        flex-shrink: 0 !important;
    }

    .nav {
        display: none !important;
    }

    .contact-btn {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        border-radius: 999px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .phone-icon {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .hero-content {
        position: relative !important;
        z-index: 5 !important;
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: var(--hero-text-top) !important;
        margin: 0 !important;
    }

    .hero-left {
        position: relative !important;
        width: 100% !important;
        max-width: 430px !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .hero-left h1 {
        position: relative !important;
        z-index: 8 !important;
        width: 100% !important;
        max-width: var(--hero-title-width) !important;
        min-height: 74px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        letter-spacing: 0 !important;
        font-weight: 900 !important;
        text-align: center !important;
        color: transparent !important;
    }

    .hero-left h1 br {
        display: none !important;
    }

    .hero-left h1 span,
    .hero-nowrap {
        display: inline !important;
        white-space: normal !important;
    }

    .hero-left h1::before {
        content: "Создаем цифровые решения\Aдля бизнеса: сайты, платформы\Aприложения и Telegram-боты" !important;
        display: block !important;
        width: 100% !important;
        max-width: 392px !important;
        margin: 0 auto !important;
        white-space: pre !important;
        text-wrap: initial !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        font-size: 22.1px !important;
        line-height: 1.08 !important;
        letter-spacing: -0.62px !important;
        font-weight: 900 !important;
        color: #ffffff !important;
        text-align: center !important;
    }

    .hero-left h1::after,
    .hero-left h1 span::before,
    .hero-left h1 span::after,
    .hero-nowrap::before,
    .hero-nowrap::after {
        content: none !important;
        display: none !important;
    }

    .hero-subtitle {
        position: relative !important;
        z-index: 8 !important;
        width: 100% !important;
        max-width: var(--hero-subtitle-width) !important;
        min-height: 42px !important;
        margin: var(--hero-subtitle-top) auto 0 !important;
        padding: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        text-align: center !important;
        color: transparent !important;
        overflow: visible !important;
    }

    .hero-subtitle br {
        display: none !important;
    }

    .hero-subtitle::before {
        content: "Подбираем решение под вашу задачу\Aа не продаем лишнюю разработку" !important;
        display: block !important;
        white-space: pre-line !important;
        font-size: var(--hero-subtitle-size) !important;
        line-height: 1.28 !important;
        font-weight: 500 !important;
        letter-spacing: -0.05px !important;
        color: rgba(255,255,255,0.72) !important;
        text-align: center !important;
    }

    .hero-subtitle::after {
        content: "" !important;
        position: absolute !important;
        top: -12px !important;
        left: 50% !important;
        width: 92px !important;
        height: 2px !important;
        border-radius: 999px !important;
        background: linear-gradient(
            90deg,
            transparent,
            #2a7fff,
            #744dff,
            transparent
        ) !important;
        box-shadow:
            0 0 14px rgba(65,119,255,0.52),
            0 0 24px rgba(116,77,255,0.26) !important;
        animation: heroScannerPhone 3s ease-in-out infinite !important;
        pointer-events: none !important;
    }

    .hero-left::after {
        content: "ГАРАНТИЯ РЕЗУЛЬТАТА ИЛИ ВЕРНЁМ ОПЛАТУ" !important;
        position: absolute !important;
        left: 50% !important;
        top: var(--guarantee-top) !important;
        z-index: 9 !important;
        width: 100% !important;
        max-width: var(--guarantee-width) !important;
        transform: translateX(-50%) !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background:
            linear-gradient(
                100deg,
                rgba(255,255,255,0.92) 0%,
                rgba(120,180,255,0.98) 32%,
                rgba(255,255,255,1) 52%,
                rgba(42,127,255,0.98) 74%,
                rgba(255,255,255,0.9) 100%
            ) !important;
        background-size: 210% 100% !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        box-shadow: none !important;
        font-size: var(--guarantee-size) !important;
        line-height: 1.25 !important;
        font-weight: 900 !important;
        letter-spacing: 0.42px !important;
        text-transform: uppercase !important;
        color: transparent !important;
        text-align: center !important;
        text-shadow:
            0 0 16px rgba(42,127,255,0.26),
            0 0 34px rgba(255,255,255,0.08) !important;
        animation: mobileGuaranteeGradient 4.8s ease-in-out infinite !important;
        pointer-events: none !important;
    }

    .hero > .hero-rocket-wrap {
        position: absolute !important;
        z-index: 2 !important;
        left: 50% !important;
        top: var(--rocket-top) !important;
        width: 100% !important;
        max-width: 100% !important;
        height: var(--rocket-height) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: translateX(-50%) !important;
        pointer-events: none !important;
        overflow: visible !important;
    }

    .hero > .hero-rocket-wrap .hero-rocket {
        position: relative !important;
        width: var(--rocket-width) !important;
        max-width: 100% !important;
        max-height: var(--rocket-height) !important;
        height: auto !important;
        object-fit: contain !important;
        transform: none !important;
        filter:
            drop-shadow(0 0 18px rgba(42,127,255,0.18))
            drop-shadow(0 22px 42px rgba(0,0,0,0.42)) !important;
        opacity: 0.96 !important;
    }

    .features {
        position: relative !important;
        z-index: 10 !important;
        width: 100% !important;
        max-width: var(--features-width) !important;
        min-width: 0 !important;
        margin: var(--features-top) auto 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: var(--feature-gap) !important;
        align-items: stretch !important;
        overflow: visible !important;
    }

    .feature-card {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        height: var(--feature-height) !important;
        min-height: var(--feature-height) !important;
        max-height: var(--feature-height) !important;
        padding: 4px !important;
        border-radius: var(--feature-radius) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        transform: none !important;
        overflow: hidden !important;
    }

    .feature-card::after {
        border-radius: calc(var(--feature-radius) - 1px) !important;
    }

    .feature-card:hover {
        transform: none !important;
    }

    .feature-img {
        width: var(--feature-icon) !important;
        height: var(--feature-icon) !important;
        flex-shrink: 0 !important;
    }

    .feature-text {
        width: 100% !important;
        font-size: var(--feature-font) !important;
        line-height: 1.04 !important;
        font-weight: 600 !important;
        text-align: center !important;
    }

    .hero-buttons {
        position: relative !important;
        z-index: 10 !important;
        width: 100% !important;
        max-width: var(--hero-buttons-width) !important;
        min-width: 0 !important;
        margin: 12px auto 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .primary-btn,
    .secondary-btn {
        width: 100% !important;
        min-width: 0 !important;
        height: var(--hero-button-height) !important;
        padding: 0 10px !important;
        border-radius: 15px !important;
        font-size: 12.5px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    .hero-button-note {
        position: relative !important;
        z-index: 10 !important;
        margin: 8px auto 0 !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
        color: rgba(255,255,255,0.50) !important;
    }
}

/* Mobile Deck */

@media screen and (max-width: 430px) {
    .mobile-card-deck {
        --deck-width: 82vw;
        --deck-max-width: 340px;
        --deck-side-shift: 24px;
        --deck-back-shift: 42px;
        --deck-next-y: 14px;
        --deck-after-y: 28px;
        --deck-next-scale: 0.94;
        --deck-after-scale: 0.88;
        --deck-next-opacity: 0.72;
        --deck-after-opacity: 0.42;
        --deck-speed: 420ms;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
        touch-action: pan-y !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .mobile-card-deck .deck-card {
        position: absolute !important;
        left: 50% !important;
        top: 0 !important;
        width: var(--deck-width) !important;
        max-width: var(--deck-max-width) !important;
        margin: 0 !important;
        transition:
            transform var(--deck-speed) cubic-bezier(0.22, 1, 0.36, 1),
            opacity var(--deck-speed) ease,
            filter var(--deck-speed) ease,
            box-shadow var(--deck-speed) ease !important;
        will-change: transform, opacity !important;
        pointer-events: none !important;
    }

    .mobile-card-deck .deck-card.is-active {
        z-index: 5 !important;
        opacity: 1 !important;
        filter: none !important;
        transform:
            translateX(-50%)
            translateY(0)
            scale(1) !important;
        pointer-events: auto !important;
    }

    .mobile-card-deck .deck-card.is-next {
        z-index: 4 !important;
        opacity: var(--deck-next-opacity) !important;
        filter: saturate(0.92) brightness(0.88) !important;
        transform:
            translateX(calc(-50% + var(--deck-side-shift)))
            translateY(var(--deck-next-y))
            scale(var(--deck-next-scale)) !important;
    }

    .mobile-card-deck .deck-card.is-after {
        z-index: 3 !important;
        opacity: var(--deck-after-opacity) !important;
        filter: saturate(0.82) brightness(0.76) !important;
        transform:
            translateX(calc(-50% + var(--deck-back-shift)))
            translateY(var(--deck-after-y))
            scale(var(--deck-after-scale)) !important;
    }

    .mobile-card-deck .deck-card.is-prev,
    .mobile-card-deck .deck-card.is-hidden {
        z-index: 1 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        filter: blur(1px) brightness(0.5) !important;
        transform:
            translateX(calc(-50% + var(--deck-back-shift)))
            translateY(var(--deck-after-y))
            scale(0.80) !important;
    }

    .mobile-card-deck .deck-card.is-leaving {
        z-index: 6 !important;
        opacity: 0 !important;
        transform:
            translateX(calc(-50% + 64px))
            translateY(34px)
            scale(0.84)
            rotate(1.5deg) !important;
    }

    .mobile-card-deck .deck-card::before,
    .mobile-card-deck .deck-card::after {
        pointer-events: none !important;
    }

    .service-cards.mobile-card-deck {
        --deck-width: 78vw;
        --deck-max-width: 318px;
        margin-top: 28px !important;
        margin-bottom: 66px !important;
    }

    .cases-grid.mobile-card-deck {
        --deck-width: 78vw;
        --deck-max-width: 318px;
        margin-top: 0 !important;
        margin-bottom: 66px !important;
    }

    .values-grid.mobile-card-deck {
        --value-card-size: 178px;
        --deck-width: var(--value-card-size);
        --deck-max-width: var(--value-card-size);
        margin-top: 0 !important;
        margin-bottom: 58px !important;
    }
}

/* Swipe Hints */

@media screen and (max-width: 430px) {
    .services,
    .cases,
    .about-values-wrap {
        overflow: visible !important;
    }

    .service-cards.mobile-card-deck,
    .cases-grid.mobile-card-deck,
    .values-grid.mobile-card-deck {
        position: relative !important;
        overflow: visible !important;
    }

    .service-cards.mobile-card-deck::before,
    .cases-grid.mobile-card-deck::before,
    .values-grid.mobile-card-deck::before {
        content: "⭠   свайп   ⭢" !important;
        position: absolute !important;
        left: 50% !important;
        top: calc(100% + -25px) !important;
        z-index: 40 !important;
        width: 122px !important;
        height: 20px !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        color: rgba(255,255,255,0.72) !important;
        font-size: 9.5px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        letter-spacing: 0.85px !important;
        text-transform: uppercase !important;
        text-shadow:
            0 0 12px rgba(42,127,255,0.62),
            0 0 24px rgba(116,77,255,0.28) !important;
        animation: mobileSwipeHintText 2.7s ease-in-out infinite !important;
        pointer-events: none !important;
    }

    .service-cards.mobile-card-deck::after,
    .cases-grid.mobile-card-deck::after,
    .values-grid.mobile-card-deck::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: calc(100% + -8px) !important;
        z-index: 39 !important;
        width: 82px !important;
        height: 4px !important;
        transform: translateX(-50%) !important;
        border-radius: 999px !important;
        background:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(42,127,255,0.24) 18%,
                rgba(255,255,255,0.82) 50%,
                rgba(116,77,255,0.28) 82%,
                transparent 100%
            ) !important;
        box-shadow:
            0 0 14px rgba(42,127,255,0.42),
            0 0 26px rgba(116,77,255,0.22) !important;
        animation: mobileSwipeHintLine 2.7s ease-in-out infinite !important;
        pointer-events: none !important;
    }
}

/* Services */

@media screen and (max-width: 430px) {
    .services {
        overflow: visible !important;
    }

    .service-cards {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        gap: 0 !important;
    }

    .service-card {
        width: 78vw !important;
        max-width: 318px !important;
        padding: 16px 16px 18px !important;
        border-radius: 18px !important;
        transform: none !important;
        text-align: center !important;
        box-shadow:
            0 18px 34px rgba(0,0,0,0.28),
            0 0 28px rgba(42,127,255,0.08) !important;
    }

    .service-card:hover {
        transform: none !important;
    }

    .service-card img,
    .service-card .service-icon,
    .service-card .service-img,
    .service-card .service-card-icon,
    .service-card .icon,
    .service-card .card-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .service-card .service-icon img,
    .service-card .service-img img,
    .service-card .service-card-icon img,
    .service-card .icon img,
    .service-card .card-icon img {
        display: block !important;
        margin: auto !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
    }

    .service-card h3 {
        width: 100% !important;
        max-width: 250px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: 17px !important;
        line-height: 1.08 !important;
        text-align: center !important;
        text-wrap: balance !important;
    }

    .service-card p {
        font-size: 12px !important;
        line-height: 1.36 !important;
        text-align: inherit !important;
    }
}

/* Process */

@media screen and (max-width: 430px) {
    .process {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        padding: 58px 18px 70px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        overflow: visible !important;
    }

    .process-label,
    .section-label.process-label,
    .solutions-label,
    .section-label.solutions-label,
    .audience-label,
    .section-label.audience-label,
    .cases-label,
    .section-label.cases-label,
    .about-label,
    .section-label.about-label,
    .contacts-label,
    .section-label.contacts-label {
        position: relative !important;
        inset: auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        font-size: 11px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        color: rgba(42,127,255,0.95) !important;
        text-align: left !important;
    }

    .process-label span,
    .section-label.process-label span,
    .solutions-label span,
    .section-label.solutions-label span,
    .audience-label span,
    .section-label.audience-label span,
    .cases-label span,
    .section-label.cases-label span,
    .about-label span,
    .section-label.about-label span,
    .contacts-label span,
    .section-label.contacts-label span {
        display: inline-block !important;
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        background: #2a7fff !important;
        box-shadow: 0 0 14px rgba(42,127,255,0.8) !important;
    }

    .process-label,
    .section-label.process-label {
        width: 100% !important;
        margin: 0 0 42px !important;
    }

    .process-top {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 24px !important;
        padding: 0 !important;
    }

    .process-title-wrap {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .process h2 {
        width: 100% !important;
        max-width: 350px !important;
        margin: 0 auto 14px !important;
        padding: 0 !important;
        font-size: 34px !important;
        line-height: 0.98 !important;
        letter-spacing: -1.35px !important;
        font-weight: 900 !important;
        text-align: center !important;
    }

    .process-top p {
        width: 100% !important;
        max-width: 285px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        font-size: 13.2px !important;
        line-height: 1.36 !important;
        color: rgba(255,255,255,0.72) !important;
        text-align: center !important;
        text-wrap: balance !important;
    }

    .process-cards,
    .process-cards.mobile-card-deck {
        position: relative !important;
        width: 100% !important;
        max-width: 370px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 30px auto 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 17px 12px !important;
        overflow: visible !important;
        touch-action: auto !important;
        user-select: auto !important;
        -webkit-user-select: auto !important;
    }

    .process-cards.mobile-card-deck .deck-card,
    .process-cards.mobile-card-deck .deck-card.is-active,
    .process-cards.mobile-card-deck .deck-card.is-next,
    .process-cards.mobile-card-deck .deck-card.is-after,
    .process-cards.mobile-card-deck .deck-card.is-prev,
    .process-cards.mobile-card-deck .deck-card.is-hidden,
    .process-cards.mobile-card-deck .deck-card.is-leaving,
    .process-card {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        z-index: 1 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 216px !important;
        min-height: 216px !important;
        max-height: 216px !important;
        margin: 0 !important;
        padding: 19px 10px 15px !important;
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
        transform: none !important;
        pointer-events: auto !important;
        transition: none !important;
        animation: none !important;
        overflow: visible !important;
    }

    .process-card {
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: center !important;
        box-shadow:
            0 16px 28px rgba(0,0,0,0.25),
            0 0 24px rgba(42,127,255,0.085) !important;
    }

    .process-card:hover {
        transform: none !important;
    }

    .process-card::before {
        border-radius: 18px !important;
    }

    .process-card::after {
        border-radius: 17px !important;
    }

    .process-dot {
        position: absolute !important;
        left: 50% !important;
        top: -7px !important;
        z-index: 8 !important;
        width: 15px !important;
        height: 15px !important;
        transform: translateX(-50%) !important;
        border-radius: 999px !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
        pointer-events: none !important;
    }

    .process-number {
        align-self: flex-start !important;
        font-size: 24px !important;
        line-height: 1 !important;
    }

    .process-icon {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        margin: 13px 0 13px !important;
        font-size: 20px !important;
    }

    .process-icon img {
        width: 24px !important;
        height: 24px !important;
        object-fit: contain !important;
    }

    .process-card h3 {
        width: 100% !important;
        max-width: 150px !important;
        margin: 0 auto 7px !important;
        font-size: 13.4px !important;
        line-height: 1.08 !important;
        letter-spacing: -0.24px !important;
        text-wrap: balance !important;
    }

    .process-card p {
        width: 100% !important;
        max-width: 150px !important;
        margin: 0 auto !important;
        font-size: 9.7px !important;
        line-height: 1.28 !important;
        color: rgba(255,255,255,0.72) !important;
        text-wrap: balance !important;
    }

    .process-btn {
        width: 100% !important;
        max-width: 292px !important;
        height: 52px !important;
        margin: 30px auto 0 !important;
        border-radius: 15px !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

    .process-card:nth-child(1) .process-number,
    .process-card:nth-child(2) .process-number {
        color: #247cff !important;
    }

    .process-card:nth-child(1) .process-icon,
    .process-card:nth-child(2) .process-icon {
        border-color: rgba(65,115,255,0.45) !important;
        color: #2280ff !important;
    }

    .process-card:nth-child(3) .process-number,
    .process-card:nth-child(4) .process-number {
        color: #744dff !important;
    }

    .process-card:nth-child(3) .process-dot,
    .process-card:nth-child(4) .process-dot {
        background: #744dff !important;
        box-shadow:
            0 0 10px #744dff,
            0 0 25px #744dff,
            0 0 60px rgba(116,77,255,0.9) !important;
    }

    .process-card:nth-child(3) .process-icon,
    .process-card:nth-child(4) .process-icon {
        border-color: rgba(128, 86, 255, 0.55) !important;
        color: #8056ff !important;
        box-shadow:
            inset 0 0 24px rgba(128, 86, 255, 0.14),
            0 0 28px rgba(128, 86, 255, 0.18) !important;
    }

    .process-card:nth-child(3) .process-icon img {
        -webkit-filter:
            brightness(0)
            saturate(100%)
            invert(42%)
            sepia(87%)
            saturate(2798%)
            hue-rotate(238deg)
            brightness(101%)
            contrast(103%)
            drop-shadow(0 0 12px rgba(116,77,255,0.75)) !important;
        filter:
            brightness(0)
            saturate(100%)
            invert(42%)
            sepia(87%)
            saturate(2798%)
            hue-rotate(238deg)
            brightness(101%)
            contrast(103%)
            drop-shadow(0 0 12px rgba(116,77,255,0.75)) !important;
    }

    .process-card:nth-child(4) .process-icon {
        text-shadow: 0 0 12px rgba(116,77,255,0.75) !important;
    }

    .process-card:nth-child(3)::before,
    .process-card:nth-child(4)::before {
        background: conic-gradient(
            from var(--angle, 0deg),
            transparent 0%,
            transparent 64%,
            rgba(116,77,255,1) 78%,
            rgba(174,94,255,1) 88%,
            rgba(116,77,255,0.9) 94%,
            transparent 100%
        ) !important;
    }

    .process-card:nth-child(5) .process-number,
    .process-card:nth-child(6) .process-number {
        color: #ffb84d !important;
    }

    .process-card:nth-child(5) .process-dot,
    .process-card:nth-child(6) .process-dot {
        background: #ffb84d !important;
        box-shadow:
            0 0 10px #ffb84d,
            0 0 25px #ffb84d,
            0 0 60px rgba(255,184,77,0.9) !important;
    }

    .process-card:nth-child(5) .process-icon,
    .process-card:nth-child(6) .process-icon {
        border-color: rgba(255,184,77,0.48) !important;
        color: #ffb84d !important;
    }

    .process-card:nth-child(5) .process-icon img,
    .process-card:nth-child(6) .process-icon img {
        -webkit-filter:
            brightness(0)
            saturate(100%)
            invert(75%)
            sepia(76%)
            saturate(871%)
            hue-rotate(337deg)
            brightness(103%)
            contrast(101%)
            drop-shadow(0 0 12px rgba(255,184,77,0.75)) !important;
        filter:
            brightness(0)
            saturate(100%)
            invert(75%)
            sepia(76%)
            saturate(871%)
            hue-rotate(337deg)
            brightness(103%)
            contrast(101%)
            drop-shadow(0 0 12px rgba(255,184,77,0.75)) !important;
    }

    .process-card:nth-child(5)::before,
    .process-card:nth-child(6)::before {
        background: conic-gradient(
            from var(--angle, 0deg),
            transparent 0%,
            transparent 64%,
            rgba(255,184,77,1) 78%,
            rgba(255,220,120,1) 88%,
            rgba(255,184,77,0.9) 94%,
            transparent 100%
        ) !important;
    }
}

/* Solutions */

.solutions-swipe-hint {
    display: none;
}

@media screen and (max-width: 430px) {
    .solutions {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        padding: 58px 18px 88px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        overflow: visible !important;
    }

    .solutions-label,
    .section-label.solutions-label {
        width: 100% !important;
        margin: 0 0 32px !important;
    }

    .solutions-top {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 32px !important;
        padding: 0 !important;
        display: block !important;
        transform: none !important;
    }

    @media screen and (max-width: 430px) {
        .solutions-top h2 {
            max-width: 340px !important;
            font-size: 0 !important;
            line-height: 0 !important;
            color: transparent !important;
        }

        .solutions-top h2::before {
            content: "Найдем нужное решение\Aпод вашу задачу" !important;
            display: block !important;
            white-space: pre !important;
            font-size: 30px !important;
            line-height: 0.98 !important;
            letter-spacing: -1.35px !important;
            font-weight: 900 !important;
            color: #ffffff !important;
            text-align: left !important;
        }
    }

    .solutions-top h2 span {
        display: block !important;
    }

    .solutions-top p {
        width: 100% !important;
        max-width: 320px !important;
        margin: 16px 0 0 !important;
        padding: 0 !important;
        font-size: 13px !important;
        line-height: 1.38 !important;
        color: rgba(255,255,255,0.70) !important;
        text-align: left !important;
    }

    .solutions-table {
        position: relative !important;
        width: 100% !important;
        max-width: 342px !important;
        height: 232px !important;
        min-height: 232px !important;
        max-height: 232px !important;
        margin: 38px auto 0 !important;
        padding: 0 !important;
        display: block !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        perspective: 1200px !important;
        transform-style: preserve-3d !important;
        overflow: visible !important;
        touch-action: pan-y !important;
        overscroll-behavior-x: contain !important;
        overscroll-behavior-y: auto !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .solutions-table::before,
    .solutions-table::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        border-radius: 22px !important;
        background:
            linear-gradient(
                180deg,
                rgba(18,26,62,0.66),
                rgba(6,10,30,0.90)
            ) !important;
        pointer-events: none !important;
    }

    .solutions-table::before {
        top: 18px !important;
        z-index: 1 !important;
        width: calc(100% - 18px) !important;
        height: 216px !important;
        transform: translateX(-50%) translateY(12px) scale(0.94) !important;
        border: 1px solid rgba(85,104,255,0.16) !important;
        opacity: 0.55 !important;
    }

    .solutions-table::after {
        top: 30px !important;
        z-index: 0 !important;
        width: calc(100% - 34px) !important;
        height: 216px !important;
        transform: translateX(-50%) translateY(20px) scale(0.88) !important;
        border: 1px solid rgba(85,104,255,0.10) !important;
        opacity: 0.32 !important;
    }

    .solutions-head,
    .solutions-head div,
    .solutions-head-item,
    .solutions-head-gif,
    .task-gif {
        display: none !important;
    }

    .solutions-row:not(.solutions-head) {
        position: absolute !important;
        left: 50% !important;
        top: 0 !important;
        z-index: 2 !important;
        width: 100% !important;
        max-width: 342px !important;
        height: 222px !important;
        min-height: 222px !important;
        max-height: 222px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: stretch !important;
        gap: 0 !important;
        border: 1px solid rgba(85,104,255,0.34) !important;
        border-radius: 22px !important;
        background:
            radial-gradient(circle at 18% 0%, rgba(42,127,255,0.14), transparent 34%),
            linear-gradient(
                180deg,
                rgba(25,34,78,0.98),
                rgba(8,12,32,1)
            ) !important;
        box-shadow:
            0 18px 36px rgba(0,0,0,0.36),
            0 0 28px rgba(42,127,255,0.12),
            inset 0 1px 0 rgba(255,255,255,0.08) !important;
        overflow: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
        filter: brightness(0.74) saturate(0.88) !important;
        pointer-events: none !important;
        transform:
            translateX(calc(-50% + 42px))
            translateY(28px)
            scale(0.88) !important;
        transform-origin: center center !important;
        transform-style: preserve-3d !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        transition:
            transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
            opacity 520ms ease,
            visibility 520ms ease,
            filter 620ms ease,
            box-shadow 620ms ease !important;
        animation: none !important;
        will-change: transform, opacity, filter !important;
    }

    .solutions-row:not(.solutions-head).is-active {
        z-index: 16 !important;
        opacity: 1 !important;
        visibility: visible !important;
        filter: brightness(1) saturate(1) !important;
        transform:
            translateX(-50%)
            translateY(0)
            scale(1) !important;
        pointer-events: auto !important;
    }

    .solutions-row:not(.solutions-head).is-next-ready {
        z-index: 12 !important;
        opacity: 0.72 !important;
        visibility: visible !important;
        filter: brightness(0.86) saturate(0.92) !important;
        transform:
            translateX(calc(-50% + 24px))
            translateY(14px)
            scale(0.95) !important;
        pointer-events: none !important;
    }

    .solutions-row:not(.solutions-head).is-behind {
        z-index: 8 !important;
        opacity: 0.42 !important;
        visibility: visible !important;
        filter: brightness(0.68) saturate(0.82) blur(0.15px) !important;
        transform:
            translateX(calc(-50% + 42px))
            translateY(28px)
            scale(0.90) !important;
        pointer-events: none !important;
    }

    .solutions-row:not(.solutions-head).is-hidden {
        z-index: 1 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        filter: brightness(0.58) saturate(0.76) blur(0.2px) !important;
        transform:
            translateX(calc(-50% + 42px))
            translateY(28px)
            scale(0.86) !important;
        pointer-events: none !important;
    }
    
    .solutions-row:not(.solutions-head).is-leaving-left {
        z-index: 18 !important;
        opacity: 0 !important;
        visibility: visible !important;
        filter: brightness(0.64) saturate(0.80) blur(0.15px) !important;
        transform:
            translateX(calc(-50% - 64px))
            translateY(18px)
            scale(0.86) !important;
        pointer-events: none !important;
    }

    .solutions-row:not(.solutions-head).is-leaving-right {
        z-index: 18 !important;
        opacity: 0 !important;
        visibility: visible !important;
        filter: brightness(0.64) saturate(0.80) blur(0.15px) !important;
        transform:
            translateX(calc(-50% + 64px))
            translateY(18px)
            scale(0.86) !important;
        pointer-events: none !important;
    }

    .solutions-row:not(.solutions-head).is-leaving {
        z-index: 7 !important;
        opacity: 0.36 !important;
        visibility: visible !important;
        filter: brightness(0.64) saturate(0.80) blur(0.15px) !important;
        transform:
            translateX(calc(-50% + 64px))
            translateY(18px)
            scale(0.86) !important;
        pointer-events: none !important;
    }

    .solutions-row:not(.solutions-head)::before {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 50% !important;
        z-index: 3 !important;
        height: 1px !important;
        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255,255,255,0.14),
                transparent
            ) !important;
        pointer-events: none !important;
    }

    .solutions-row:not(.solutions-head)::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 4 !important;
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,0.10) 0%,
                transparent 30%,
                transparent 70%,
                rgba(0,0,0,0.18) 100%
            ) !important;
        opacity: 0.55 !important;
        pointer-events: none !important;
    }

    .solutions-row > div {
        position: relative !important;
        z-index: 5 !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 16px 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        border: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        background: transparent !important;
        text-align: left !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
        text-shadow: none !important;
        animation: none !important;
    }

    .solutions-row > div:first-child {
        flex: 0 0 46% !important;
        font-size: 14px !important;
        line-height: 1.18 !important;
        font-weight: 900 !important;
        letter-spacing: -0.25px !important;
        color: rgba(255,255,255,0.96) !important;
    }

    .solutions-row > div:last-child {
        flex: 1 1 auto !important;
        border-bottom: none !important;
        font-size: 11.4px !important;
        line-height: 1.35 !important;
        font-weight: 500 !important;
        color: rgba(255,255,255,0.76) !important;
    }

    .solutions-row > div:first-child::before,
    .solutions-row > div:last-child::before {
        display: block !important;
        flex: 0 0 68px !important;
        min-width: 68px !important;
        margin-right: 10px !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
        font-weight: 900 !important;
        letter-spacing: 0.7px !important;
        text-transform: uppercase !important;
    }

    .solutions-row > div:first-child::before {
        content: "ЕСЛИ ВАША ЗАДАЧА:" !important;
        color: #2a7fff !important;
    }

    .solutions-row > div:last-child::before {
        content: "ТО ВАШЕ РЕШЕНИЕ:" !important;
        color: #744dff !important;
    }

    .solutions-row:not(.solutions-head):first-of-type {
        display: none !important;
    }

    .solutions-swipe-hint {
        position: relative !important;
        z-index: 20 !important;
        width: 100% !important;
        max-width: 342px !important;
        height: 52px !important;
        margin: 24px auto 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: none !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }

    .solutions-swipe-hint span {
        position: relative !important;
        width: 122px !important;
        height: 20px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent !important;
    }

    .solutions-swipe-hint span::before {
        content: "⭠   свайп   ⭢" !important;
        position: absolute !important;
        left: 50% !important;
        top: 0 !important;
        width: 122px !important;
        height: 20px !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: rgba(255,255,255,0.72) !important;
        font-size: 9.5px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        letter-spacing: 0.85px !important;
        text-transform: uppercase !important;
        text-shadow:
            0 0 12px rgba(42,127,255,0.62),
            0 0 24px rgba(116,77,255,0.28) !important;
        animation: mobileSwipeHintText 2.7s ease-in-out infinite !important;
    }

    .solutions-swipe-hint span::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: 27px !important;
        width: 82px !important;
        height: 4px !important;
        transform: translateX(-50%) !important;
        border-radius: 999px !important;
        background:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(42,127,255,0.24) 18%,
                rgba(255,255,255,0.82) 50%,
                rgba(116,77,255,0.28) 82%,
                transparent 100%
            ) !important;
        box-shadow:
            0 0 14px rgba(42,127,255,0.42),
            0 0 26px rgba(116,77,255,0.22) !important;
        animation: mobileSwipeHintLine 2.7s ease-in-out infinite !important;
    }
}

/* Audience */

@media screen and (max-width: 430px) {
    .audience {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        padding: 58px 18px 64px !important;
        color: white !important;
        background: transparent !important;
        overflow: visible !important;
    }

    .audience::after {
        content: none !important;
        display: none !important;
    }

    .audience-label,
    .section-label.audience-label {
        width: 100% !important;
        margin: 0 0 20px !important;
    }

    .audience-top {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 28px !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .audience-top h2 {
        margin: 0 auto 14px !important;
        padding: 0 !important;
        text-transform: none !important;
    }

    .audience-title {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .audience-title-main,
    .audience-title-sub {
        display: block !important;
        font-size: 33px !important;
        line-height: 0.97 !important;
        letter-spacing: -1.3px !important;
        font-weight: 900 !important;
        text-align: center !important;
    }

    .audience-top p {
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        font-size: 13px !important;
        line-height: 1.38 !important;
        color: rgba(255,255,255,0.70) !important;
        text-align: center !important;
        text-wrap: balance !important;
    }

    .audience-top p br {
        display: none !important;
    }

    .audience-grid,
    .audience-grid.mobile-card-deck {
        position: relative !important;
        width: 100% !important;
        max-width: 336px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
        scroll-padding-left: 0 !important;
        touch-action: auto !important;
        user-select: auto !important;
        -webkit-user-select: auto !important;
    }

    .audience-grid.mobile-card-deck .deck-card,
    .audience-grid.mobile-card-deck .deck-card.is-active,
    .audience-grid.mobile-card-deck .deck-card.is-next,
    .audience-grid.mobile-card-deck .deck-card.is-after,
    .audience-grid.mobile-card-deck .deck-card.is-prev,
    .audience-grid.mobile-card-deck .deck-card.is-hidden,
    .audience-grid.mobile-card-deck .deck-card.is-leaving,
    .audience-item {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        z-index: 1 !important;
        flex: none !important;
        width: 100% !important;
        max-width: 336px !important;
        height: 146px !important;
        min-height: 146px !important;
        max-height: 146px !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
        transform: none !important;
        pointer-events: auto !important;
        transition: none !important;
        animation: none !important;
        scroll-snap-align: none !important;
    }

    .audience-item {
        display: grid !important;
        grid-template-columns: 130px 1fr !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow:
            0 18px 34px rgba(0,0,0,0.28),
            0 0 28px rgba(42,127,255,0.08) !important;
    }

    .audience-photo {
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    .audience-photo img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    .audience-info {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 13px 44px 13px 13px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        text-align: left !important;
    }

    .audience-info::before {
        top: 12px !important;
        bottom: 12px !important;
    }

    .audience-info h3 {
        max-width: 160px !important;
        margin: 0 0 6px !important;
        font-size: 13.6px !important;
        line-height: 1.05 !important;
        letter-spacing: -0.3px !important;
        font-weight: 900 !important;
        text-transform: none !important;
        text-wrap: balance !important;
    }

    .audience-item:nth-child(6) .audience-info h3 {
        font-size: 14.6px !important;
        line-height: 1.04 !important;
    }

    .audience-info p {
        max-width: 160px !important;
        margin: 0 !important;
        font-size: 9.5px !important;
        line-height: 1.25 !important;
        color: rgba(255,255,255,0.70) !important;
        text-wrap: balance !important;
    }

    .audience-icon {
        position: absolute !important;
        right: 10px !important;
        bottom: 10px !important;
        width: 31px !important;
        height: 31px !important;
        object-fit: contain !important;
    }

    .audience-why {
        width: 100% !important;
        max-width: 92% !important;
        margin: 30px auto 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px 16px !important;
    }

    .audience-why-card {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: none !important;
        box-shadow: none !important;
    }

    .audience-why-card h3 {
        margin: 0 0 6px !important;
        font-size: 12.8px !important;
        line-height: 1.12 !important;
        font-weight: 900 !important;
        color: white !important;
    }

    .audience-why-card p {
        margin: 0 !important;
        font-size: 9.8px !important;
        line-height: 1.32 !important;
        color: rgba(255,255,255,0.62) !important;
    }

    .audience-footnote {
        width: 100% !important;
        max-width: 310px !important;
        margin: 24px auto 0 !important;
        font-size: 9.4px !important;
        line-height: 1.35 !important;
        text-align: center !important;
        color: rgba(255,255,255,0.38) !important;
    }
}

/* Cases */

@media screen and (max-width: 430px) {
    .cases {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        padding: 62px 0 74px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        overflow: visible !important;
        background:
            radial-gradient(circle at 50% 16%, rgba(42,127,255,0.12), transparent 32%),
            linear-gradient(
                180deg,
                rgba(7,11,31,0) 0%,
                rgba(8,13,38,0.82) 24%,
                rgba(6,10,29,0.92) 72%,
                rgba(7,11,31,0) 100%
            ) !important;
    }

    .cases::before {
        content: none !important;
        display: none !important;
    }

    .cases::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        z-index: 4 !important;
        width: min(900px, 78vw) !important;
        height: 4px !important;
        transform: translateX(-50%) !important;
        border-radius: 999px !important;
        background: linear-gradient(
            90deg,
            transparent,
            rgba(42,127,255,0.95),
            rgba(255,255,255,0.85),
            rgba(116,77,255,0.95),
            transparent
        ) !important;
        box-shadow:
            0 0 28px rgba(42,127,255,0.95),
            0 0 80px rgba(116,77,255,0.45) !important;
        opacity: 0.95 !important;
        animation: casesSectionDividerGlow 4s ease-in-out infinite !important;
        pointer-events: none !important;
    }

    .cases-label,
    .section-label.cases-label,
    .cases-top,
    .cases-grid {
        position: relative !important;
        z-index: 2 !important;
    }

    .cases-label,
    .section-label.cases-label {
        width: calc(100% - 36px) !important;
        margin: 0 auto 20px !important;
    }

    .cases-top {
        width: calc(100% - 36px) !important;
        max-width: 100% !important;
        margin: 0 auto 30px !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .cases-top h2 {
        max-width: 350px !important;
        margin: 0 auto 12px !important;
        font-size: 35px !important;
        line-height: 0.98 !important;
        letter-spacing: -1.35px !important;
        font-weight: 900 !important;
        text-align: center !important;
        text-shadow:
            0 0 22px rgba(42,127,255,0.18),
            0 0 38px rgba(116,77,255,0.12) !important;
    }

    .cases-top p {
        max-width: 320px !important;
        margin: 0 auto !important;
        font-size: 13px !important;
        line-height: 1.38 !important;
        color: rgba(255,255,255,0.70) !important;
        text-align: center !important;
        text-wrap: balance !important;
    }

    .cases-grid {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
        scroll-padding-left: 0 !important;
        -webkit-overflow-scrolling: auto !important;
        scrollbar-width: none !important;
    }

    .cases-grid::-webkit-scrollbar {
        display: none !important;
    }

    .cases-grid.mobile-card-deck .deck-card.is-prev,
    .cases-grid.mobile-card-deck .deck-card.is-hidden,
    .cases-grid.mobile-card-deck .deck-card.is-leaving {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .cases-grid.mobile-card-deck .deck-card:not(.is-active)::before,
    .cases-grid.mobile-card-deck .case-card::before,
    .cases-grid.mobile-card-deck .case-card::after {
        content: none !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .case-card {
        position: relative !important;
        flex: none !important;
        width: 78vw !important;
        max-width: 318px !important;
        min-height: 545px !important;
        padding: 16px 14px 18px !important;
        border-radius: 20px !important;
        scroll-snap-align: none !important;
        display: flex !important;
        flex-direction: column !important;
        outline: none !important;
        overflow: hidden !important;
        box-shadow:
            0 18px 34px rgba(0,0,0,0.30),
            0 0 34px rgba(42,127,255,0.10) !important;
    }

    .case-card,
    .case-card *,
    .case-head,
    .case-body,
    .case-content,
    .case-image-placeholder {
        outline: none !important;
    }

    .case-card .case-head,
    .case-card .case-body,
    .case-card .case-content {
        border: none !important;
        box-shadow: none !important;
    }

    .case-head {
        display: grid !important;
        grid-template-columns: 76px 1fr !important;
        gap: 11px !important;
        margin-bottom: 14px !important;
        align-items: center !important;
    }

    .case-image-placeholder {
        width: 76px !important;
        height: 76px !important;
        border-radius: 16px !important;
    }

    .case-number {
        margin-bottom: 6px !important;
        font-size: 9px !important;
        line-height: 1 !important;
        letter-spacing: 1px !important;
    }

    .case-card h3 {
        margin: 0 0 6px !important;
        font-size: 18px !important;
        line-height: 1.03 !important;
        letter-spacing: -0.45px !important;
        text-wrap: balance !important;
    }

    .case-subtitle {
        font-size: 10.2px !important;
        line-height: 1.28 !important;
    }

    .case-card h4 {
        margin-top: 10px !important;
        margin-bottom: 5px !important;
        font-size: 12.4px !important;
        line-height: 1.1 !important;
    }

    .case-card p {
        margin: 0 !important;
        font-size: 10.1px !important;
        line-height: 1.32 !important;
        color: rgba(255,255,255,0.68) !important;
    }

    .case-card ul {
        gap: 4px !important;
        margin: 0 0 6px !important;
        padding: 0 !important;
    }

    .case-card li {
        font-size: 10px !important;
        line-height: 1.25 !important;
    }

    .case-card li::before {
        margin-right: 5px !important;
    }
}

/* About */

@media screen and (max-width: 430px) {
    .about {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        padding: 58px 18px 46px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    .about-label,
    .section-label.about-label {
        width: 100% !important;
        margin: 0 0 20px !important;
    }

    .about-hero {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 34px !important;
        align-items: start !important;
    }

    .about-left {
        width: 100% !important;
        max-width: 100% !important;
    }

    .about-left h2 {
        max-width: 350px !important;
        margin: 0 0 16px !important;
        font-size: 35px !important;
        line-height: 0.98 !important;
        letter-spacing: -1.35px !important;
        font-weight: 900 !important;
    }

    .about-left p {
        max-width: 320px !important;
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.38 !important;
        color: rgba(255,255,255,0.72) !important;
    }

    .about-line {
        width: 64px !important;
        height: 2px !important;
        margin: 18px 0 !important;
    }

    .about-stats {
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px 16px !important;
    }

    .about-stats div {
        padding: 0 12px 0 0 !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(90,110,255,0.18) !important;
    }

    .about-stats div:nth-child(3),
    .about-stats div:nth-child(4) {
        border-bottom: none !important;
    }

    .about-stats strong {
        margin: 0 0 6px !important;
        font-size: 32px !important;
        line-height: 1 !important;
    }

    .about-stats span {
        font-size: 11px !important;
        line-height: 1.25 !important;
        color: rgba(255,255,255,0.68) !important;
    }

    .team-block {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .team-block > h3,
    .about-section-title {
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .team-block > h3 {
        margin-top: 0 !important;
        margin-bottom: 18px !important;
        font-size: 29px !important;
        line-height: 0.98 !important;
        letter-spacing: -1.1px !important;
        font-weight: 900 !important;
    }

    .team-cards {
        width: 100% !important;
        max-width: 92% !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .team-card {
        width: 100% !important;
        min-height: 158px !important;
        padding: 14px !important;
        display: grid !important;
        grid-template-columns: 100px 1fr !important;
        gap: 13px !important;
        align-items: center !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }

    .team-card::after {
        border-radius: 17px !important;
    }

    .team-card img {
        width: 100px !important;
        height: 120px !important;
        border-radius: 16px !important;
        object-fit: cover !important;
    }

    .team-card:nth-child(1) img {
        object-position: center 10% !important;
    }

    .team-card:nth-child(2) img {
        object-position: center 70% !important;
    }

    .team-info {
        width: 100% !important;
        min-width: 0 !important;
    }

    .team-info h4 {
        margin: 0 0 5px !important;
        font-size: 16.8px !important;
        line-height: 1 !important;
        letter-spacing: -0.35px !important;
    }

    .team-info span {
        margin: 0 0 8px !important;
        font-size: 10px !important;
        line-height: 1.25 !important;
        color: rgba(255,255,255,0.70) !important;
    }

    .team-info p {
        margin: 0 !important;
        font-size: 9.6px !important;
        line-height: 1.3 !important;
        color: rgba(255,255,255,0.70) !important;
    }

    .about-values-wrap {
        position: relative !important;
        z-index: 5 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 36px 0 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .about-section-title {
        position: relative !important;
        z-index: 6 !important;
        display: block !important;
        margin-top: 0 !important;
        margin-bottom: 18px !important;
        font-size: 29px !important;
        line-height: 1 !important;
        letter-spacing: -1px !important;
        font-weight: 900 !important;
        color: #ffffff !important;
    }

    .values-grid {
        position: relative !important;
        z-index: 6 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
        scroll-padding-left: 0 !important;
        -webkit-overflow-scrolling: auto !important;
        scrollbar-width: none !important;
    }

    .values-grid::-webkit-scrollbar {
        display: none !important;
    }

    .value-card {
        position: relative !important;
        flex: none !important;
        width: var(--value-card-size) !important;
        max-width: var(--value-card-size) !important;
        height: var(--value-card-size) !important;
        min-height: var(--value-card-size) !important;
        max-height: var(--value-card-size) !important;
        padding: 10px 10px !important;
        border-radius: 18px !important;
        scroll-snap-align: none !important;
        overflow: visible !important;
        margin-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        box-shadow:
            0 16px 28px rgba(0,0,0,0.24),
            0 0 24px rgba(42,127,255,0.07) !important;
    }

    .value-card::before {
        content: "" !important;
        position: absolute !important;
        inset: 7px -6px -7px 6px !important;
        z-index: -1 !important;
        border: 1px solid rgba(90,110,255,0.14) !important;
        border-radius: 18px !important;
        background: rgba(13, 18, 45, 0.58) !important;
        pointer-events: none !important;
    }

    .value-card::after {
        border-radius: 17px !important;
    }

    .value-card:hover {
        transform: none !important;
    }

    .value-icon-img {
        width: 64px !important;
        height: 64px !important;
        margin: 0 auto 7px !important;
        display: block !important;
        object-fit: contain !important;
    }

    .value-card h4 {
        width: 100% !important;
        max-width: 230px !important;
        margin: 0 auto 5px !important;
        font-size: 16.4px !important;
        line-height: 1.04 !important;
        letter-spacing: -0.3px !important;
        text-align: center !important;
        text-wrap: balance !important;
    }

    .value-card p {
        width: 100% !important;
        max-width: 230px !important;
        margin: 0 auto !important;
        font-size: 11px !important;
        line-height: 1.24 !important;
        color: rgba(255,255,255,0.72) !important;
        text-align: center !important;
        text-wrap: balance !important;
    }
}

/* Contacts */

@media screen and (max-width: 430px) {
    .contacts {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        padding: 46px 18px 72px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 34px !important;
        align-items: start !important;
        background: transparent !important;
        color: white !important;
        overflow: hidden !important;
    }

    .contacts-left {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .contacts-label,
    .section-label.contacts-label {
        width: 100% !important;
        margin: 0 0 10px !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    .contacts-left h2 {
        max-width: 350px !important;
        margin: 0 auto 18px !important;
        font-size: 34px !important;
        line-height: 0.96 !important;
        letter-spacing: -1.35px !important;
        font-weight: 900 !important;
        text-align: center !important;
    }

    .contacts-left p {
        max-width: 320px !important;
        margin: 0 auto 28px !important;
        font-size: 13px !important;
        line-height: 1.38 !important;
        color: rgba(255,255,255,0.72) !important;
        text-align: center !important;
        text-wrap: balance !important;
    }

    .contacts-links {
        width: 100% !important;
        max-width: 86% !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .contact-item {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 62px !important;
        padding: 13px 14px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        border-radius: 16px !important;
        text-decoration: none !important;
        color: white !important;
        transform: none !important;
        text-align: left !important;
        box-shadow:
            0 16px 28px rgba(0,0,0,0.22),
            0 0 22px rgba(42,127,255,0.06) !important;
    }

    .contact-item:hover {
        transform: none !important;
    }

    .contact-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 12px !important;
        font-size: 18px !important;
    }

    .contact-custom-icon {
        width: 20px !important;
        height: 20px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
    }

    .contact-item strong {
        margin: 0 0 3px !important;
        font-size: 13.5px !important;
        line-height: 1.15 !important;
    }

    .contact-item span {
        display: block !important;
        font-size: 10.8px !important;
        line-height: 1.25 !important;
        color: rgba(255,255,255,0.66) !important;
        word-break: break-word !important;
    }

    .contacts-card {
        width: 100% !important;
        max-width: 86% !important;
        transform: none !important;
        padding: 20px 18px !important;
        border-radius: 20px !important;
        margin: 0 auto !important;
        text-align: center !important;
        box-shadow:
            0 18px 34px rgba(0,0,0,0.28),
            0 0 28px rgba(42,127,255,0.08) !important;
    }

    .contacts-card h3 {
        margin: 0 auto 10px !important;
        font-size: 23px !important;
        line-height: 1 !important;
        letter-spacing: -0.65px !important;
        text-align: center !important;
    }

    .contacts-card p {
        margin: 0 auto 20px !important;
        font-size: 12px !important;
        line-height: 1.38 !important;
        color: rgba(255,255,255,0.70) !important;
        text-align: center !important;
    }

    .contacts-btn {
        width: 100% !important;
        height: 52px !important;
        border-radius: 15px !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

    .contacts-btn:hover {
        transform: none !important;
    }

    .calc-modal {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        width: calc(100% - 28px) !important;
        max-width: 390px !important;
        max-height: calc(100vh - 32px) !important;
        padding: 26px 18px 20px !important;
        border-radius: 24px !important;
        transform: translate(-50%, -46%) scale(0.96) !important;
        overflow-y: auto !important;
        z-index: 320 !important;
    }

    .calc-modal.active {
        transform: translate(-50%, -50%) scale(1) !important;
    }

    .calc-modal-close {
        width: 34px !important;
        height: 34px !important;
        top: 18px !important;
        right: 18px !important;
        border-radius: 10px !important;
        font-size: 15px !important;
        line-height: 1 !important;
    }

    .calc-modal-close:hover {
        transform: none !important;
    }

    .calc-modal-title {
        max-width: 300px !important;
        margin: 28px auto 16px !important;
        font-size: 24px !important;
        line-height: 1.05 !important;
        letter-spacing: -0.8px !important;
        text-align: center !important;
    }

    .calc-modal-title span {
        white-space: normal !important;
    }

    .calc-modal > p:not(.calc-policy-text) {
        margin: 0 0 18px !important;
        font-size: 12.5px !important;
        line-height: 1.35 !important;
        text-align: center !important;
    }

    .calc-modal input,
    .calc-modal textarea {
        width: 100% !important;
        margin-bottom: 10px !important;
        padding: 14px !important;
        border-radius: 13px !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    .calc-modal textarea {
        height: 92px !important;
        min-height: 92px !important;
        max-height: 120px !important;
        resize: none !important;
    }

    .calc-policy-text {
        margin: 0 0 12px !important;
        font-size: 9.8px !important;
        line-height: 1.35 !important;
        color: rgba(255,255,255,0.46) !important;
    }

    .calc-send-btn {
        width: 100% !important;
        height: 54px !important;
        margin-top: 4px !important;
        border-radius: 15px !important;
        font-size: 15px !important;
        line-height: 1 !important;
    }

    .calc-send-btn:hover {
        transform: none !important;
    }

    .contact-overlay {
        position: fixed !important;
        inset: 0 !important;
        z-index: 300 !important;
        background:
            radial-gradient(circle at 50% 30%, rgba(42,127,255,0.16), transparent 34%),
            rgba(2,5,17,0.76) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition:
            opacity 260ms ease,
            visibility 260ms ease !important;
    }

    .contact-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .contact-panel {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        z-index: 310 !important;
        width: calc(100% - 32px) !important;
        max-width: 390px !important;
        height: auto !important;
        max-height: calc(100dvh - 32px) !important;
        transform: translate(-50%, -46%) scale(0.96) !important;
        border: 1px solid rgba(90,110,255,0.28) !important;
        border-radius: 24px !important;
        background:
            linear-gradient(
                180deg,
                rgba(14,20,50,0.98),
                rgba(5,8,24,0.98)
            ) !important;
        box-shadow:
            0 24px 60px rgba(0,0,0,0.50),
            0 0 42px rgba(42,127,255,0.18),
            0 0 90px rgba(116,77,255,0.10) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        overflow: hidden !important;
        transition:
            opacity 280ms ease,
            visibility 280ms ease,
            transform 280ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    .contact-panel.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate(-50%, -50%) scale(1) !important;
    }

    .contact-close {
        position: absolute !important;
        top: 14px !important;
        right: 14px !important;
        z-index: 3 !important;
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(255,255,255,0.10) !important;
        border-radius: 11px !important;
        background: rgba(255,255,255,0.06) !important;
        color: rgba(255,255,255,0.86) !important;
        font-size: 14px !important;
        line-height: 1 !important;
        transform: none !important;
    }

    .contact-panel-content {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 32px) !important;
        padding: 56px 18px 20px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        text-align: center !important;
    }

    .contact-label {
        width: 100% !important;
        margin: 0 auto 20px !important;
        font-size: 25px !important;
        line-height: 1 !important;
        letter-spacing: 1.2px !important;
        font-weight: 900 !important;
        color: #ffffff !important;
        text-align: center !important;
    }

    .contact-link {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 62px !important;
        height: auto !important;
        margin: 0 0 12px !important;
        padding: 13px 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        border: 1px solid rgba(90,110,255,0.22) !important;
        border-radius: 16px !important;
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,0.065),
                rgba(255,255,255,0.028)
            ) !important;
        box-shadow:
            0 14px 26px rgba(0,0,0,0.22),
            0 0 22px rgba(42,127,255,0.07) !important;
        color: #ffffff !important;
        text-decoration: none !important;
        font-size: 13.5px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        text-align: left !important;
        overflow: hidden !important;
    }

    .contact-link:last-child {
        margin-bottom: 0 !important;
    }

    .contact-link span {
        display: block !important;
        min-width: 0 !important;
        color: rgba(255,255,255,0.88) !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .contact-panel img,
    .contact-panel svg,
    .contact-link img,
    .contact-link svg,
    .mail-contact-icon,
    .phone-contact-icon,
    .telegram-contact-icon {
        position: static !important;
        inset: auto !important;
        display: block !important;
        width: 20px !important;
        min-width: 20px !important;
        max-width: 20px !important;
        height: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;
        flex: 0 0 20px !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
        scale: 1 !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 1 !important;
    }

    .contact-panel:not(.active) img,
    .contact-panel:not(.active) svg,
    .contact-panel:not(.active) .mail-contact-icon,
    .contact-panel:not(.active) .phone-contact-icon,
    .contact-panel:not(.active) .telegram-contact-icon {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .contact-panel .mail-contact-icon,
    .contact-panel .phone-contact-icon,
    .contact-panel .telegram-contact-icon {
        filter:
            brightness(0)
            saturate(100%)
            invert(47%)
            sepia(95%)
            saturate(2668%)
            hue-rotate(202deg)
            brightness(101%)
            contrast(101%)
            drop-shadow(0 0 10px rgba(42,127,255,0.55)) !important;
    }

    .site-toast {
        top: 16px !important;
        right: 14px !important;
        left: 14px !important;
        width: auto !important;
        max-width: none !important;
        padding: 14px !important;
        border-radius: 18px !important;
        gap: 12px !important;
        transform: translateY(-14px) scale(0.96) !important;
        z-index: 500 !important;
    }

    .site-toast.active {
        transform: translateY(0) scale(1) !important;
    }

    .site-toast-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 12px !important;
        font-size: 18px !important;
    }

    .site-toast-content strong {
        font-size: 14px !important;
        line-height: 1.15 !important;
    }

    .site-toast-content span {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    .scroll-top-btn {
        right: 18px !important;
        bottom: 24px !important;
        width: 28px !important;
        height: 28px !important;
        z-index: 260 !important;
    }

    .scroll-top-btn img {
        width: 76px !important;
        height: 76px !important;
    }
}

/* Small Phones */

@media screen and (max-width: 374px) {
    .hero {
        --hero-text-top: 6px;
        --hero-title-width: 314px;
        --hero-title-size: 20px;
        --hero-subtitle-width: 292px;
        --hero-subtitle-size: 9.7px;
        --hero-subtitle-top: 18px;
        --rocket-top: 218px;
        --rocket-height: 274px;
        --rocket-width: min(88vw, 318px);
        --guarantee-top: 428px;
        --guarantee-width: 280px;
        --guarantee-size: 10px;
        --features-top: 330px;
        --features-width: 300px;
        --feature-height: 46px;
        --feature-gap: 6px;
        --feature-radius: 11px;
        --feature-icon: 14px;
        --feature-font: 6.8px;
        --hero-buttons-width: 300px;
        --hero-button-height: 41px;
        min-height: 642px !important;
        padding: 14px 12px calc(24px + env(safe-area-inset-bottom)) !important;
    }

    .logo {
        gap: 5px !important;
    }

    .logo::after {
        font-size: 11px !important;
        letter-spacing: 0.35px !important;
    }

    .logo-image {
        width: 36px !important;
        height: 36px !important;
    }

    .contact-btn {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
    }

    .phone-icon {
        width: 13px !important;
        height: 13px !important;
    }

    .hero-left h1 {
        min-height: 59px !important;
    }

    .hero-left h1::before {
        max-width: 314px !important;
        font-size: 18px !important;
        line-height: 1.08 !important;
        letter-spacing: -0.68px !important;
    }

    .hero-subtitle {
        margin-top: 9px !important;
    }

    .hero-buttons {
        margin-top: 9px !important;
        gap: 7px !important;
    }

    .primary-btn,
    .secondary-btn {
        font-size: 11.2px !important;
        border-radius: 14px !important;
    }

    .hero-button-note {
        display: none !important;
    }

    .process,
    .solutions,
    .audience,
    .about {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .process {
        padding-top: 50px !important;
        padding-bottom: 62px !important;
    }

    .solutions {
        padding-top: 50px !important;
        padding-bottom: 78px !important;
    }

    .audience {
        padding-top: 50px !important;
        padding-bottom: 58px !important;
    }

    .about {
        padding-top: 50px !important;
        padding-bottom: 42px !important;
    }

    .process h2,
    .solutions-top h2,
    .audience-title-main,
    .audience-title-sub,
    .cases-top h2,
    .about-left h2,
    .contacts-left h2 {
        font-size: 29px !important;
        line-height: 0.98 !important;
        letter-spacing: -1.1px !important;
    }

    .process-top p,
    .solutions-top p,
    .audience-top p,
    .cases-top p,
    .about-left p,
    .contacts-left p {
        max-width: 290px !important;
        font-size: 11.8px !important;
        line-height: 1.34 !important;
    }

    .service-cards.mobile-card-deck {
        --deck-width: 80vw;
        --deck-max-width: 280px;
        --deck-side-shift: 22px;
        --deck-back-shift: 38px;
        margin-bottom: 60px !important;
    }

    .cases-grid.mobile-card-deck {
        --deck-width: 80vw;
        --deck-max-width: 292px;
        --deck-side-shift: 22px;
        --deck-back-shift: 38px;
        margin-bottom: 60px !important;
    }

    .values-grid.mobile-card-deck {
        --value-card-size: 168px;
        --deck-width: var(--value-card-size);
        --deck-max-width: var(--value-card-size);
        --deck-side-shift: 22px;
        --deck-back-shift: 38px;
        margin-bottom: 60px !important;
    }

    .service-cards.mobile-card-deck::before,
    .cases-grid.mobile-card-deck::before,
    .values-grid.mobile-card-deck::before {
        top: calc(100% + 18px) !important;
        width: 108px !important;
        font-size: 8.6px !important;
        letter-spacing: 0.7px !important;
    }

    .service-cards.mobile-card-deck::after,
    .cases-grid.mobile-card-deck::after,
    .values-grid.mobile-card-deck::after {
        top: calc(100% + 43px) !important;
        width: 72px !important;
        height: 3px !important;
    }

    .service-card {
        width: 80vw !important;
        max-width: 280px !important;
        padding: 15px 14px 17px !important;
        border-radius: 16px !important;
    }

    .service-card h3 {
        font-size: 15.8px !important;
    }

    .process-cards,
    .process-cards.mobile-card-deck {
        max-width: 304px !important;
        gap: 15px 10px !important;
    }

    .process-cards.mobile-card-deck .deck-card,
    .process-cards.mobile-card-deck .deck-card.is-active,
    .process-cards.mobile-card-deck .deck-card.is-next,
    .process-cards.mobile-card-deck .deck-card.is-after,
    .process-cards.mobile-card-deck .deck-card.is-prev,
    .process-cards.mobile-card-deck .deck-card.is-hidden,
    .process-cards.mobile-card-deck .deck-card.is-leaving,
    .process-card {
        height: 198px !important;
        min-height: 198px !important;
        max-height: 198px !important;
        padding: 18px 8px 13px !important;
    }

    .process-number {
        font-size: 21px !important;
    }

    .process-icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 11px 0 11px !important;
    }

    .process-icon img {
        width: 21px !important;
        height: 21px !important;
    }

    .process-card h3 {
        max-width: 124px !important;
        font-size: 11.4px !important;
        line-height: 1.08 !important;
    }

    .process-card p {
        max-width: 124px !important;
        font-size: 8.3px !important;
        line-height: 1.25 !important;
    }

    .solutions {
        padding: 50px 14px 78px !important;
    }

    .solutions-top h2 {
        max-width: 312px !important;
        font-size: 29px !important;
        line-height: 0.98 !important;
        letter-spacing: -1.1px !important;
    }

    .solutions-top p {
        max-width: 290px !important;
        font-size: 11.8px !important;
        line-height: 1.34 !important;
    }

    .solutions-table {
        max-width: 294px !important;
        height: 208px !important;
        min-height: 208px !important;
        max-height: 208px !important;
    }

    .solutions-table::before,
    .solutions-table::after {
        height: 198px !important;
    }

    .solutions-row:not(.solutions-head) {
        max-width: 294px !important;
        height: 198px !important;
        min-height: 198px !important;
        max-height: 198px !important;
        border-radius: 20px !important;
    }

    .solutions-row > div {
        padding: 13px 13px !important;
    }

    .solutions-row > div:first-child {
        font-size: 12.2px !important;
        line-height: 1.16 !important;
    }

    .solutions-row > div:last-child {
        font-size: 10.2px !important;
        line-height: 1.3 !important;
    }

    .solutions-row > div:first-child::before,
    .solutions-row > div:last-child::before {
        flex-basis: 58px !important;
        min-width: 58px !important;
        margin-right: 8px !important;
        font-size: 8px !important;
    }

    .solutions-swipe-hint {
        max-width: 294px !important;
        height: 48px !important;
        margin-top: 22px !important;
    }

    .solutions-swipe-hint span {
        font-size: 8.6px !important;
        letter-spacing: 0.7px !important;
    }

    .audience-grid,
    .audience-grid.mobile-card-deck {
        max-width: 294px !important;
        gap: 10px !important;
    }

    .audience-grid.mobile-card-deck .deck-card,
    .audience-grid.mobile-card-deck .deck-card.is-active,
    .audience-grid.mobile-card-deck .deck-card.is-next,
    .audience-grid.mobile-card-deck .deck-card.is-after,
    .audience-grid.mobile-card-deck .deck-card.is-prev,
    .audience-grid.mobile-card-deck .deck-card.is-hidden,
    .audience-grid.mobile-card-deck .deck-card.is-leaving,
    .audience-item {
        max-width: 294px !important;
        height: 132px !important;
        min-height: 132px !important;
        max-height: 132px !important;
    }

    .audience-item {
        grid-template-columns: 112px 1fr !important;
    }

    .audience-info {
        padding: 10px 36px 10px 10px !important;
    }

    .audience-info h3 {
        max-width: 132px !important;
        font-size: 11.8px !important;
        line-height: 1.04 !important;
        margin-bottom: 5px !important;
    }

    .audience-item:nth-child(6) .audience-info h3 {
        font-size: 12.6px !important;
    }

    .audience-info p {
        max-width: 132px !important;
        font-size: 8.3px !important;
        line-height: 1.22 !important;
    }

    .audience-icon {
        width: 26px !important;
        height: 26px !important;
        right: 8px !important;
        bottom: 8px !important;
    }

    .audience-why {
        max-width: 91% !important;
        gap: 16px 12px !important;
        margin-top: 24px !important;
    }

    .audience-why-card h3 {
        font-size: 11.8px !important;
    }

    .audience-why-card p {
        font-size: 9px !important;
        line-height: 1.28 !important;
    }

    .audience-footnote {
        max-width: 290px !important;
        font-size: 9px !important;
    }

    .cases {
        padding: 52px 0 64px !important;
    }

    .cases-label,
    .section-label.cases-label,
    .cases-top {
        width: calc(100% - 28px) !important;
    }

    .case-card {
        width: 80vw !important;
        max-width: 292px !important;
        min-height: 525px !important;
        padding: 15px 13px 17px !important;
        border-radius: 18px !important;
    }

    .case-head {
        grid-template-columns: 68px 1fr !important;
        gap: 10px !important;
    }

    .case-image-placeholder {
        width: 68px !important;
        height: 68px !important;
        border-radius: 15px !important;
    }

    .case-card h3 {
        font-size: 16px !important;
    }

    .case-subtitle {
        font-size: 9.2px !important;
    }

    .case-card h4 {
        font-size: 11.5px !important;
    }

    .case-card p,
    .case-card li {
        font-size: 9.2px !important;
        line-height: 1.25 !important;
    }

    .about-stats {
        max-width: 290px !important;
        gap: 16px 12px !important;
    }

    .about-stats strong {
        font-size: 28px !important;
    }

    .about-stats span {
        font-size: 10px !important;
    }

    .team-block > h3,
    .about-section-title {
        font-size: 26px !important;
    }

    .team-card {
        min-height: 150px !important;
        padding: 13px !important;
        grid-template-columns: 90px 1fr !important;
        gap: 11px !important;
        border-radius: 17px !important;
    }

    .team-card img {
        width: 90px !important;
        height: 112px !important;
        border-radius: 15px !important;
    }

    .team-info h4 {
        font-size: 15px !important;
    }

    .team-info span {
        font-size: 9.2px !important;
    }

    .team-info p {
        font-size: 8.8px !important;
        line-height: 1.25 !important;
    }

    .value-card {
        width: var(--value-card-size) !important;
        max-width: var(--value-card-size) !important;
        height: var(--value-card-size) !important;
        min-height: var(--value-card-size) !important;
        max-height: var(--value-card-size) !important;
        padding: 8px 8px !important;
    }

    .value-icon-img {
        width: 56px !important;
        height: 56px !important;
        margin-bottom: 6px !important;
    }

    .value-card h4 {
        font-size: 14.8px !important;
        line-height: 1.03 !important;
        margin-bottom: 4px !important;
    }

    .value-card p {
        font-size: 10px !important;
        line-height: 1.2 !important;
    }

    .contacts {
        padding: 42px 14px 68px !important;
    }

    .contacts-links,
    .contacts-card {
        max-width: 88% !important;
    }

    .contact-item {
        min-height: 58px !important;
        padding: 12px 13px !important;
    }

    .contact-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    .contacts-card {
        padding: 18px 16px !important;
    }

    .contacts-card h3 {
        font-size: 21px !important;
    }

    .contact-panel {
        width: calc(100% - 24px) !important;
        border-radius: 22px !important;
    }

    .contact-panel-content {
        padding: 52px 14px 18px !important;
    }

    .contact-label {
        margin-bottom: 18px !important;
        font-size: 23px !important;
    }

    .contact-link {
        min-height: 58px !important;
        padding: 12px 13px !important;
        border-radius: 15px !important;
        font-size: 12.5px !important;
    }

    .contact-panel img,
    .contact-panel svg,
    .contact-link img,
    .contact-link svg,
    .mail-contact-icon,
    .phone-contact-icon,
    .telegram-contact-icon {
        width: 18px !important;
        min-width: 18px !important;
        max-width: 18px !important;
        height: 18px !important;
        min-height: 18px !important;
        max-height: 18px !important;
        flex-basis: 18px !important;
    }
}

/* iPhone 375–393 */

@media screen and (min-width: 375px) and (max-width: 393px) {
    .hero {
        --hero-text-top: 5px;
        --hero-title-width: 360px;
        --hero-title-size: 23px;
        --hero-subtitle-width: 332px;
        --hero-subtitle-size: 10.8px;
        --hero-subtitle-top: 20px;
        --rocket-top: 216px;
        --rocket-height: 306px;
        --rocket-width: min(91vw, 364px);
        --guarantee-top: 440px;
        --guarantee-width: 315px;
        --guarantee-size: 11.2px;
        --features-top: 352px;
        --features-width: 326px;
        --feature-height: 52px;
        --feature-gap: 8px;
        --feature-radius: 13px;
        --feature-icon: 17px;
        --feature-font: 8.1px;
        --hero-buttons-width: 326px;
        --hero-button-height: 45px;
        min-height: 690px !important;
        padding: 16px 16px calc(26px + env(safe-area-inset-bottom)) !important;
    }

    .logo {
        gap: 5px !important;
    }

    .logo::after {
        font-size: 12px !important;
        letter-spacing: 0.42px !important;
    }

    .logo-image {
        width: 48px !important;
        height: 48px !important;
    }

    .contact-btn {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
    }

    .hero-left h1 {
        min-height: 67px !important;
    }

    .hero-left h1::before {
        max-width: 360px !important;
        font-size: 20.4px !important;
        line-height: 1.08 !important;
        letter-spacing: -0.66px !important;
    }

    .hero-subtitle {
        margin-top: 20px !important;
    }

    .process {
        padding: 56px 16px 66px !important;
    }

    .solutions {
        padding: 56px 16px 86px !important;
    }

    .audience {
        padding: 56px 16px 62px !important;
    }

    .about {
        padding: 56px 16px 44px !important;
    }

    .process h2,
    .solutions-top h2,
    .audience-title-main,
    .audience-title-sub,
    .cases-top h2,
    .about-left h2,
    .contacts-left h2 {
        font-size: 32px !important;
    }

    .process-top p,
    .solutions-top p,
    .audience-top p,
    .cases-top p,
    .about-left p,
    .contacts-left p {
        max-width: 310px !important;
        font-size: 12.5px !important;
        line-height: 1.36 !important;
    }

    .service-cards.mobile-card-deck {
        --deck-width: 78vw;
        --deck-max-width: 304px;
    }

    .cases-grid.mobile-card-deck {
        --deck-width: 78vw;
        --deck-max-width: 306px;
    }

    .values-grid.mobile-card-deck {
        --value-card-size: 178px;
        --deck-width: var(--value-card-size);
        --deck-max-width: var(--value-card-size);
    }

    .service-card {
        width: 78vw !important;
        max-width: 304px !important;
    }

    .process-card {
        width: 78vw !important;
        max-width: 304px !important;
        height: 216px !important;
        min-height: 216px !important;
        max-height: 216px !important;
    }

    .solutions {
        padding: 56px 16px 86px !important;
    }

    .solutions-top h2 {
        font-size: 32px !important;
    }

    .solutions-top p {
        max-width: 310px !important;
        font-size: 12.5px !important;
        line-height: 1.36 !important;
    }

    .solutions-table {
        max-width: 320px !important;
        height: 222px !important;
        min-height: 222px !important;
        max-height: 222px !important;
    }

    .solutions-table::before,
    .solutions-table::after {
        height: 212px !important;
    }

    .solutions-row:not(.solutions-head) {
        max-width: 320px !important;
        height: 212px !important;
        min-height: 212px !important;
        max-height: 212px !important;
    }

    .solutions-row > div {
        padding: 14px 15px !important;
    }

    .solutions-row > div:first-child {
        font-size: 13.2px !important;
        line-height: 1.17 !important;
    }

    .solutions-row > div:last-child {
        font-size: 10.9px !important;
        line-height: 1.33 !important;
    }
    
    .solutions-swipe-hint {
        max-width: 320px !important;
    }

    .audience-item {
        width: 82vw !important;
        max-width: 320px !important;
        height: 140px !important;
        min-height: 140px !important;
        grid-template-columns: 122px 1fr !important;
    }

    .audience-info h3 {
        max-width: 148px !important;
        font-size: 12.8px !important;
    }

    .audience-item:nth-child(6) .audience-info h3 {
        font-size: 13.8px !important;
    }

    .audience-info p {
        max-width: 148px !important;
        font-size: 8.9px !important;
    }

    .audience-icon {
        width: 28px !important;
        height: 28px !important;
    }

    .cases {
        padding: 58px 0 68px !important;
    }

    .cases-label,
    .section-label.cases-label,
    .cases-top {
        width: calc(100% - 32px) !important;
    }

    .case-card {
        width: 78vw !important;
        max-width: 306px !important;
        min-height: 535px !important;
    }

    .case-head {
        grid-template-columns: 74px 1fr !important;
    }

    .case-image-placeholder {
        width: 74px !important;
        height: 74px !important;
    }

    .case-card h3 {
        font-size: 17.2px !important;
    }

    .case-card p,
    .case-card li {
        font-size: 9.8px !important;
    }

    .team-card {
        grid-template-columns: 96px 1fr !important;
        min-height: 154px !important;
    }

    .team-card img {
        width: 96px !important;
        height: 116px !important;
    }

    .team-info h4 {
        font-size: 16.2px !important;
    }

    .team-info p {
        font-size: 9.2px !important;
    }

    .value-card {
        width: var(--value-card-size) !important;
        max-width: var(--value-card-size) !important;
        height: var(--value-card-size) !important;
        min-height: var(--value-card-size) !important;
        max-height: var(--value-card-size) !important;
        padding: 9px 9px !important;
    }

    .value-icon-img {
        width: 62px !important;
        height: 62px !important;
        margin-bottom: 6px !important;
    }

    .value-card h4 {
        font-size: 15.8px !important;
        line-height: 1.03 !important;
        margin-bottom: 5px !important;
    }

    .value-card p {
        font-size: 10.6px !important;
        line-height: 1.22 !important;
    }
}

/* Large Phones */

@media screen and (min-width: 394px) and (max-width: 430px) {
    .hero {
        --hero-text-top: 5px;
        --hero-title-width: 412px;
        --hero-title-size: 24px;
        --hero-subtitle-width: 352px;
        --hero-subtitle-size: 11.2px;
        --hero-subtitle-top: 10px;
        --rocket-top: 210px;
        --rocket-height: 336px;
        --rocket-width: min(91vw, 386px);
        --guarantee-top: 462px;
        --guarantee-width: 340px;
        --guarantee-size: 11.8px;
        --features-top: 370px;
        --features-width: 352px;
        --feature-height: 56px;
        --feature-gap: 8px;
        --feature-radius: 15px;
        --feature-icon: 18px;
        --feature-font: 8.8px;
        --hero-buttons-width: 352px;
        --hero-button-height: 46px;
        min-height: 724px !important;
        padding: 20px 20px calc(28px + env(safe-area-inset-bottom)) !important;
    }

    .logo {
        gap: 5px !important;
    }

    .logo::after {
        font-size: 13px !important;
        letter-spacing: 0.45px !important;
    }

    .logo-image {
        width: 54px !important;
        height: 54px !important;
    }

    .contact-btn {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
    }

    .hero-left h1 {
        min-height: 74px !important;
    }

    .hero-left h1::before {
        max-width: 392px !important;
        font-size: 22.1px !important;
        line-height: 1.08 !important;
        letter-spacing: -0.62px !important;
    }

    .hero-subtitle {
        margin-top: 20px !important;
    }

    .process {
        padding: 60px 20px 72px !important;
    }

    .solutions {
        padding: 60px 20px 92px !important;
    }

    .audience {
        padding: 60px 20px 68px !important;
    }

    .about {
        padding: 60px 20px 46px !important;
    }

    .process h2,
    .solutions-top h2,
    .audience-title-main,
    .audience-title-sub,
    .cases-top h2,
    .about-left h2,
    .contacts-left h2 {
        font-size: 35px !important;
    }

    .process-top p,
    .solutions-top p,
    .audience-top p,
    .cases-top p,
    .about-left p,
    .contacts-left p {
        max-width: 340px !important;
        font-size: 13.2px !important;
        line-height: 1.38 !important;
    }

    .service-cards.mobile-card-deck {
        --deck-width: 76vw;
        --deck-max-width: 318px;
    }

    .cases-grid.mobile-card-deck {
        --deck-width: 76vw;
        --deck-max-width: 318px;
    }

    .values-grid.mobile-card-deck {
        --value-card-size: 188px;
        --deck-width: var(--value-card-size);
        --deck-max-width: var(--value-card-size);
    }

    .service-card {
        width: 76vw !important;
        max-width: 318px !important;
    }

    .process-cards,
    .process-cards.mobile-card-deck {
        max-width: 368px !important;
        gap: 18px 13px !important;
    }

    .process-cards.mobile-card-deck .deck-card,
    .process-cards.mobile-card-deck .deck-card.is-active,
    .process-cards.mobile-card-deck .deck-card.is-next,
    .process-cards.mobile-card-deck .deck-card.is-after,
    .process-cards.mobile-card-deck .deck-card.is-prev,
    .process-cards.mobile-card-deck .deck-card.is-hidden,
    .process-cards.mobile-card-deck .deck-card.is-leaving,
    .process-card {
        height: 226px !important;
        min-height: 226px !important;
        max-height: 226px !important;
    }

    .process-card h3 {
        font-size: 13.8px !important;
    }

    .process-card p {
        font-size: 9.9px !important;
    }

    .solutions {
        padding: 60px 20px 92px !important;
    }

    .solutions-top h2 {
        font-size: 35px !important;
    }

    .solutions-top p {
        max-width: 340px !important;
        font-size: 13.2px !important;
        line-height: 1.38 !important;
    }

    .solutions-table {
        max-width: 336px !important;
        height: 232px !important;
        min-height: 232px !important;
        max-height: 232px !important;
    }

    .solutions-row:not(.solutions-head) {
        max-width: 336px !important;
        height: 222px !important;
        min-height: 222px !important;
        max-height: 222px !important;
    }

    .solutions-row > div:first-child {
        font-size: 14.2px !important;
    }

    .solutions-row > div:last-child {
        font-size: 11.5px !important;
    }
    
    .solutions-swipe-hint {
        max-width: 336px !important;
    }

    .audience-item {
        width: 80vw !important;
        max-width: 336px !important;
        height: 148px !important;
        min-height: 148px !important;
        grid-template-columns: 132px 1fr !important;
    }

    .audience-info {
        padding: 13px 44px 13px 13px !important;
    }

    .audience-info h3 {
        max-width: 160px !important;
        font-size: 13.8px !important;
    }

    .audience-item:nth-child(6) .audience-info h3 {
        font-size: 14.8px !important;
    }

    .audience-info p {
        max-width: 160px !important;
        font-size: 9.6px !important;
    }

    .audience-icon {
        width: 31px !important;
        height: 31px !important;
    }

    .cases {
        padding: 62px 0 74px !important;
    }

    .cases-label,
    .section-label.cases-label,
    .cases-top {
        width: calc(100% - 40px) !important;
    }

    .case-card {
        width: 76vw !important;
        max-width: 318px !important;
        min-height: 555px !important;
    }

    .case-head {
        grid-template-columns: 80px 1fr !important;
    }

    .case-image-placeholder {
        width: 80px !important;
        height: 80px !important;
    }

    .case-card h3 {
        font-size: 18.5px !important;
    }

    .case-card p,
    .case-card li {
        font-size: 10.2px !important;
    }

    .about-stats {
        max-width: 340px !important;
    }

    .team-card {
        grid-template-columns: 106px 1fr !important;
        min-height: 164px !important;
    }

    .team-card img {
        width: 106px !important;
        height: 126px !important;
    }

    .team-info h4 {
        font-size: 17.4px !important;
    }

    .team-info p {
        font-size: 9.8px !important;
    }

    .value-card {
        width: var(--value-card-size) !important;
        max-width: var(--value-card-size) !important;
        height: var(--value-card-size) !important;
        min-height: var(--value-card-size) !important;
        max-height: var(--value-card-size) !important;
        padding: 10px 10px !important;
    }

    .value-icon-img {
        width: 66px !important;
        height: 66px !important;
        margin-bottom: 7px !important;
    }

    .value-card h4 {
        font-size: 16.6px !important;
        line-height: 1.03 !important;
        margin-bottom: 5px !important;
    }

    .value-card p {
        font-size: 11.1px !important;
        line-height: 1.22 !important;
    }
}

/* Landscape Lock */

@media screen and (max-width: 932px) and (max-height: 500px) and (orientation: landscape) {
    html,
    body {
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
        background: #030717 !important;
    }

    body > * {
        visibility: hidden !important;
    }

    body::before {
        content: "" !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 99998 !important;
        visibility: visible !important;
        background:
            radial-gradient(circle at 50% 30%, rgba(42,127,255,0.24), transparent 34%),
            radial-gradient(circle at 50% 70%, rgba(116,77,255,0.18), transparent 42%),
            #030717 !important;
    }

    body::after {
        content: "Поверните телефон вертикально" !important;
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        z-index: 99999 !important;
        visibility: visible !important;
        width: calc(100% - 48px) !important;
        max-width: 420px !important;
        padding: 28px 24px !important;
        transform: translate(-50%, -50%) !important;
        border: 1px solid rgba(90,110,255,0.28) !important;
        border-radius: 24px !important;
        background: rgba(8,12,32,0.94) !important;
        box-shadow:
            0 0 40px rgba(42,127,255,0.22),
            0 0 90px rgba(116,77,255,0.12) !important;
        color: #ffffff !important;
        font-size: 24px !important;
        line-height: 1.15 !important;
        font-weight: 900 !important;
        letter-spacing: -0.6px !important;
        text-align: center !important;
    }
}

/* Animations */

@keyframes heroScannerPhone {
    0% {
        transform: translateX(-116px);
    }

    50% {
        transform: translateX(20px);
    }

    100% {
        transform: translateX(-116px);
    }
}

@keyframes mobileGuaranteeGradient {
    0%, 100% {
        background-position: 0% 50%;
        opacity: 0.9;
    }

    50% {
        background-position: 100% 50%;
        opacity: 1;
    }
}

@keyframes mobileSwipeHintText {
    0%, 100% {
        opacity: 0.52;
        transform: translateX(-50%);
    }

    35% {
        opacity: 1;
        transform: translateX(calc(-50% - 7px));
    }

    70% {
        opacity: 1;
        transform: translateX(calc(-50% + 7px));
    }
}

@keyframes mobileSwipeHintLine {
    0%, 100% {
        opacity: 0.34;
        transform: translateX(-50%) scaleX(0.68);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scaleX(1);
    }
}

@keyframes casesSectionDividerGlow {
    0%, 100% {
        opacity: 0.55;
        width: min(900px, 78vw);
    }

    50% {
        opacity: 1;
        width: min(1300px, 92vw);
    }
}