@media (max-width: 860px) {
    #features .grid,
    #for .grid,
    #pricing .prices {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 14px !important;
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
        margin: 18px -10px 0 !important;
        padding: 2px 10px 16px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scroll-padding-left: 10px !important;
        scrollbar-width: none !important;
        cursor: grab !important;
        touch-action: pan-x !important;
    }

    #features .grid::-webkit-scrollbar,
    #for .grid::-webkit-scrollbar,
    #pricing .prices::-webkit-scrollbar {
        display: none !important;
    }

    #features .grid.is-dragging,
    #for .grid.is-dragging,
    #pricing .prices.is-dragging {
        cursor: grabbing !important;
        scroll-snap-type: none !important;
        user-select: none !important;
    }

    #features .grid .card,
    #for .grid .card,
    #pricing .prices .price {
        flex: 0 0 min(82vw, 330px) !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 230px !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
    }

    #pricing .prices .price.featured {
        transform: none !important;
    }

    #features .container,
    #for .container,
    #pricing .container {
        overflow: visible !important;
    }

    .blumo-mobile-slider-dots {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 7px !important;
        min-height: 16px !important;
        margin: -2px 0 0 !important;
    }

    .blumo-mobile-slider-dot {
        width: 7px !important;
        height: 7px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: rgba(109, 77, 255, .22) !important;
        box-shadow: none !important;
        cursor: pointer !important;
        transition: width .2s ease, background .2s ease, transform .2s ease !important;
    }

    .blumo-mobile-slider-dot.is-active {
        width: 22px !important;
        background: linear-gradient(135deg, #7C5CFF, #3A8BFF) !important;
        transform: translateY(-1px) !important;
    }
}

@media (min-width: 861px) {
    .blumo-mobile-slider-dots {
        display: none !important;
    }
}

/* Hero visual tuning */
.blumo-hero-logo-core {
    width: 190px !important;
    height: 190px !important;
    border-radius: 50px !important;
    border-width: 13px !important;
}

.blumo-hero-logo-core img {
    width: 160px !important;
    height: 160px !important;
}

.blumo-lead-card {
    left: 36px !important;
    bottom: 159px !important;
}

.o3 {
    bottom: 110px !important;
    left: 58px !important;
}

.hero-flow-bottom {
    left: 246px !important;
    bottom: 66px !important;
}

@media (max-width: 1180px) and (min-width: 861px) {
    .blumo-hero-logo-core {
        width: 176px !important;
        height: 176px !important;
    }

    .blumo-hero-logo-core img {
        width: 126px !important;
        height: 126px !important;
    }

    .blumo-lead-card {
        bottom: 128px !important;
    }

    .o3 {
        bottom: 106px !important;
    }
}

@media (max-width: 860px) {
    .blumo-hero-logo-core {
        width: 154px !important;
        height: 154px !important;
        border-width: 11px !important;
    }

    .blumo-hero-logo-core img {
        width: 104px !important;
        height: 104px !important;
    }

    .blumo-lead-card {
        bottom: 104px !important;
    }

    .o3 {
        bottom: 84px !important;
    }
}

@media (max-width: 520px) {
    .blumo-hero-logo-core {
        width: 138px !important;
        height: 138px !important;
        border-width: 10px !important;
    }

    .blumo-hero-logo-core img {
        width: 94px !important;
        height: 94px !important;
    }

    .blumo-lead-card {
        bottom: 96px !important;
    }

    .o3 {
        bottom: 76px !important;
    }
}