#uo-landing {
            --uo-bg: #f4f2e8;
            --uo-text: #132130;
            --uo-text-muted: #4e5a6a;
            --uo-accent: #f25829;
            --uo-accent-hover: #e54615;
            --uo-card-bg: #ffffff;
            --uo-border: rgba(19, 33, 48, 0.08);
            --uo-border-card: rgba(19, 33, 48, 0.05);
            --uo-shadow-sm: 0 2px 5px -1px rgba(19, 33, 48, 0.04), 0 1px 3px -1px rgba(19, 33, 48, 0.02);
            --uo-shadow-md: 0 12px 24px -8px rgba(19, 33, 48, 0.08), 0 4px 12px -4px rgba(19, 33, 48, 0.05);
            --uo-shadow-lg: 0 24px 48px -12px rgba(19, 33, 48, 0.12), 0 12px 24px -8px rgba(19, 33, 48, 0.08);
            --uo-shadow-accent: 0 8px 16px -4px rgba(242, 88, 41, 0.25);
            --uo-radius: 16px;
            --uo-radius-sm: 8px;
            --uo-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

            background-color: var(--uo-bg);
            color: var(--uo-text);
            font-family: 'Wix Madefor Display', sans-serif;
            font-weight: 400;
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: clip;
        }

        /* --- TILDA STICKY FIX --- 
           Required for position: sticky to work inside Tilda HTML blocks */
        html,
        body,
        #allrecords,
        .t-rec,
        .t-record {
            overflow: visible !important;
        }

        body,
        #allrecords {
            overflow-x: clip !important;
            /* retains horizontal scroll blocking without breaking sticky */
        }

        /* The browser UA stylesheet gives <body> an 8px margin by default.
           #uo-landing * {margin:0} only resets elements INSIDE #uo-landing,
           not body itself, so every edge measurement on the page had an
           unaccounted-for +8px added on top of the intended container
           padding. Reset it here once, globally. */
        html,
        body {
            margin: 0;
            padding: 0;
        }

        #uo-landing * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
        }

        #uo-landing a {
            color: inherit;
            text-decoration: none;
        }

        #uo-landing img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        #uo-landing .uo-mobile-only {
            display: none;
        }

        @media (max-width: 480px) {
            #uo-landing .uo-mobile-only {
                display: block;
            }
        }

        /* Container */
        #uo-landing .uo-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 5%;
            position: relative;
        }

        /* Typography */
        #uo-landing h1,
        #uo-landing h2,
        #uo-landing h3,
        #uo-landing h4 {
            font-weight: 700;
            color: var(--uo-text);
            line-height: 1.15;
        }

        #uo-landing h1 {
            font-size: clamp(2rem, 5vw, 4rem);
            letter-spacing: -0.03em;
            margin-bottom: 24px;
        }

        #uo-landing h2 {
            font-size: clamp(1.75rem, 4vw, 2.5rem);
            letter-spacing: -0.02em;
            margin-bottom: 20px;
        }

        #uo-landing h3 {
            font-size: clamp(1.25rem, 2.5vw, 1.5rem);
            margin-bottom: 12px;
            letter-spacing: -0.01em;
        }

        #uo-landing p {
            color: var(--uo-text-muted);
            font-size: 1.125rem;
        }

        #uo-landing .uo-section-subtitle {
            font-size: 1.25rem;
            color: var(--uo-text-muted);
            max-width: 600px;
            margin: 0 auto;
        }

        #uo-landing .uo-badge {
            display: inline-flex;
            align-items: center;
            background: rgba(242, 88, 41, 0.1);
            color: var(--uo-accent);
            padding: 6px 14px;
            border-radius: 999px;
            font-size: 0.875rem;
            font-weight: 700;
            margin-bottom: 16px;
            border: 1px solid rgba(242, 88, 41, 0.2);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        #uo-landing .uo-badge-neutral {
            background: rgba(19, 33, 48, 0.05);
            color: var(--uo-text);
            border: none;
        }

        /* Buttons */
        #uo-landing .uo-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 14px 28px;
            font-weight: 700;
            font-size: 1rem;
            font-family: inherit;
            border-radius: 999px;
            transition: var(--uo-transition);
            cursor: pointer;
            text-decoration: none;
            border: none;
            line-height: 1;
            min-height: 48px;
        }

        #uo-landing .uo-btn-primary {
            background: var(--uo-accent);
            color: #fff;
            box-shadow: var(--uo-shadow-accent);
        }

        #uo-landing .uo-btn-primary:hover {
            background: var(--uo-accent-hover);
            transform: translateY(-2px);
            box-shadow: 0 12px 20px -6px rgba(242, 88, 41, 0.4);
        }

        #uo-landing .uo-btn-outline {
            background: transparent;
            color: var(--uo-text);
            border: 1px solid var(--uo-border);
        }

        #uo-landing .uo-btn-outline:hover {
            background: var(--uo-card-bg);
            box-shadow: var(--uo-shadow-sm);
            transform: translateY(-2px);
        }

        #uo-landing .uo-header-btn-accent {
            background: var(--uo-accent);
            color: #fff;
            box-shadow: var(--uo-shadow-accent);
        }

        #uo-landing .uo-header-btn-accent:hover {
            background: #ffb380;
            color: #132130;
            transform: translateY(-2px);
            box-shadow: 0 0 24px rgba(242, 88, 41, 0.9), 0 12px 20px -6px rgba(242, 88, 41, 0.5);
        }

        #uo-landing .uo-btn-sm {
            padding: 10px 20px;
            font-size: 0.9rem;
            min-height: 40px;
        }

        #uo-landing .uo-btn-lg {
            padding: 18px 40px;
            font-size: 1.125rem;
        }

        /* Link with arrow */
        #uo-landing .uo-link-arrow {
            display: inline-flex;
            align-items: center;
            color: var(--uo-accent);
            font-weight: 700;
            margin-top: 8px;
            transition: var(--uo-transition);
        }

        #uo-landing .uo-link-arrow:hover {
            opacity: 0.8;
            transform: translateX(4px);
        }

        /* Cards */
        #uo-landing .uo-card {
            background: var(--uo-card-bg);
            border-radius: var(--uo-radius);
            padding: 32px;
            box-shadow: var(--uo-shadow-sm);
            transition: var(--uo-transition);
            border: 1px solid var(--uo-border-card);
        }

        #uo-landing .uo-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--uo-shadow-md);
        }

        /* ===== Header ===== */
        #uo-landing .uo-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background: rgba(244, 242, 232, 0.85);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid var(--uo-border);
            padding: 16px 0;
            transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        #uo-landing .uo-header.uo-header-hidden {
            transform: translateY(-100%);
        }

        #uo-landing .uo-header-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        #uo-landing .uo-logo img {
            height: 36px;
            width: auto;
            /* The logo PNG is cropped tight to its own content bbox, and the
               "g" in "Origin" has a descender that extends ~70px below every
               other letter's baseline (measured in the source file). Flexbox
               centers the image by that full bbox, so the actual wordmark
               (ignoring the g's tail) sits visibly above the true center.
               Nudge it down by the measured offset to compensate. */
            position: relative;
            top: 4px;
        }

        #uo-landing .uo-nav {
            display: flex;
            gap: 32px;
        }

        #uo-landing .uo-nav a {
            font-weight: 700;
            color: var(--uo-text-muted);
            font-size: 0.95rem;
            transition: color 0.2s;
        }

        #uo-landing .uo-nav a:hover {
            color: var(--uo-text);
        }

        /* Social Icons & Actions */
        .uo-header-actions {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .uo-header-socials {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .uo-social-icon {
            width: 40px;
            height: 40px;
            background: rgba(19, 33, 48, 0.05);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--uo-text-main);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            text-decoration: none !important;
            border: 1px solid rgba(19, 33, 48, 0.1);
        }

        .uo-social-icon:hover {
            background: var(--uo-accent);
            color: #fff;
            transform: translateY(-3px);
            border-color: var(--uo-accent);
            box-shadow: 0 8px 16px -4px rgba(242, 88, 41, 0.4);
            opacity: 1 !important;
        }

        /* #uo-landing * resets margin to 0 with an ID in its selector,
           which outranks a bare .uo-footer-socials class — prefixed here to
           actually win. */
        #uo-landing .uo-footer-socials {
            display: flex;
            gap: 16px;
            margin-top: 48px; /* Even more spacing */
        }

        .uo-footer-contacts .uo-footer-socials {
            justify-content: flex-start;
        }

        .uo-footer-socials .uo-social-icon {
            color: #fff;
            background: rgba(255, 255, 255, 0.1);
            width: 44px;
            height: 44px;
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        .uo-footer-socials .uo-social-icon:hover {
            background: var(--uo-accent);
            color: #fff;
        }

        /* Hamburger */
        #uo-landing .uo-menu-toggle {
            display: none;
        }

        #uo-landing .uo-hamburger {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
            /* 44x44 hit area (Apple HIG / Material minimum tap target) around
               the same 24px icon glyph — was 32x32, too small to tap reliably. */
            width: 44px;
            height: 44px;
            margin: -6px;
            cursor: pointer;
            z-index: 110;
            position: relative;
        }

        #uo-landing .uo-hamburger span {
            display: block;
            width: 24px;
            height: 2px;
            background: var(--uo-text);
            border-radius: 2px;
            transition: all 0.3s ease;
        }

        #uo-landing .uo-menu-toggle:checked~.uo-hamburger span:nth-child(1) {
            transform: rotate(45deg) translate(5px, 5px);
        }

        #uo-landing .uo-menu-toggle:checked~.uo-hamburger span:nth-child(2) {
            opacity: 0;
        }

        #uo-landing .uo-menu-toggle:checked~.uo-hamburger span:nth-child(3) {
            transform: rotate(-45deg) translate(5px, -5px);
        }

        #uo-landing .uo-mobile-nav {
            display: none;
        }

        #uo-landing .uo-section {
            padding: 120px 0;
            position: relative;
        }

        /* #uo-production has no dedicated class of its own (just .uo-section
           + an inline background), so it needs its own border-bottom rule
           to keep the section-divider line consistent with every other
           section on the page. */
        #uo-landing #uo-production {
            border-bottom: 1px solid var(--uo-border);
        }

        /* ===== Hero V2 ===== */
        #uo-landing .uo-hero-v2 {
            width: 100%;
            padding: 120px 0 80px;
            /* Увеличено из-за фиксированной шапки */
            background: linear-gradient(135deg, #f4f2e8 0%, #f4f2e8 50%, rgba(242, 88, 41, 0.06) 100%);
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid var(--uo-border);
        }

        #uo-landing .uo-hero-v2-main {
            max-width: 1400px;
            width: 100%;
            margin: 0 auto;
            padding: 0 5%;
            display: flex;
            gap: 30px;
            align-items: center;
        }

        #uo-landing .uo-hero-v2-left {
            flex: 1.4;
            display: flex;
            flex-direction: column;
        }

        #uo-landing .uo-hero-v2-text .uo-badge {
            margin-bottom: 24px;
            align-self: flex-start;
        }

        #uo-landing .uo-hero-v2-title {
            font-size: 2.5rem;
            /* JS will override */
            line-height: 1.15;
            margin-bottom: 24px;
            letter-spacing: -0.02em;
            font-weight: 700;
        }

        #uo-landing .uo-hero-v2-desc {
            font-size: 1.15rem;
            color: var(--uo-text-muted);
            margin-bottom: 48px;
            max-width: 550px;
            line-height: 1.5;
        }

        /* 2x2 Features in Left side */
        #uo-landing .uo-hero-v2-features-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 32px 24px;
        }

        #uo-landing .uo-hero-v2-feature {
            display: flex;
            align-items: flex-start;
            gap: 16px;
        }

        #uo-landing .uo-hero-v2-feature-icon {
            width: 44px;
            height: 44px;
            background: #fff;
            color: var(--uo-accent);
            box-shadow: var(--uo-shadow-sm);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        #uo-landing .uo-hero-v2-feature-icon svg {
            width: 24px;
            height: 24px;
        }

        #uo-landing .uo-hero-v2-feature-text h4 {
            font-size: 1rem;
            margin-bottom: 6px;
            color: var(--uo-text);
            font-weight: 700;
            line-height: 1.2;
        }

        #uo-landing .uo-hero-v2-feature-text p {
            font-size: 0.85rem;
            line-height: 1.4;
            color: var(--uo-text-muted);
            margin: 0;
        }

        #uo-landing .uo-hero-v2-right {
            flex: 1;
            position: relative;
            display: flex;
            justify-content: flex-end;
        }

        #uo-landing .uo-hero-v2-image-wrap {
            width: 100%;
            max-width: 460px; /* Slightly smaller to allow stack space */
            aspect-ratio: 4/5;
            position: relative;
            box-sizing: border-box;
            margin-right: 40px; /* Space for the cards behind */
            margin-top: 40px;
        }

        #uo-landing .uo-hero-v2-image-inner {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* overflow: visible !important; */
        }

        #uo-landing .uo-hero-v2-image-wrap img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 24px;
            border: 8px solid #fff;
            box-shadow: var(--uo-shadow-md);
            transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
            pointer-events: none;
            opacity: 0;
        }

        #uo-landing .uo-hero-v2-image-wrap img.uo-card-top {
            z-index: 10;
            opacity: 1;
            transform: translate(0, 0) rotate(0deg);
            pointer-events: auto;
        }

        #uo-landing .uo-hero-v2-image-wrap img.uo-card-mid {
            z-index: 5;
            opacity: 1;
            transform: translate(15px, -15px) rotate(2deg);
        }

        #uo-landing .uo-hero-v2-image-wrap img.uo-card-bot {
            z-index: 2;
            opacity: 1;
            transform: translate(30px, -30px) rotate(4deg);
        }

        #uo-landing .uo-hero-v2-image-wrap img.uo-card-hidden {
            z-index: 1;
            opacity: 0;
            transform: translate(-50px, 20px) rotate(-10deg);
        }

        @keyframes uo-float {
            0% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-10px);
            }

            100% {
                transform: translateY(0px);
            }
        }

        @keyframes uo-pulse-bubble {
            0% {
                transform: translateY(0px) rotate(3deg);
            }

            100% {
                transform: translateY(-8px) rotate(5deg);
            }
        }

        #uo-landing .uo-floating-badge {
            position: absolute;
            bottom: -20px;
            left: -30px;
            background: var(--uo-card-bg);
            padding: 12px 20px;
            border-radius: var(--uo-radius-sm);
            box-shadow: var(--uo-shadow-md);
            font-weight: 700;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            gap: 12px;
            border: 1px solid var(--uo-border-card);
            z-index: 20;
        }

        #uo-landing .uo-floating-badge-icon {
            font-size: 24px;
            background: rgba(242, 88, 41, 0.1);
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            flex-shrink: 0;
        }

        #uo-landing .uo-emotional-sticker {
            position: absolute;
            top: -15px;
            right: -15px;
            background: var(--uo-accent);
            color: #fff;
            width: 130px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 18px;
            font-weight: 700;
            font-size: 1.1rem;
            box-shadow: var(--uo-shadow-md);
            z-index: 25;
            text-align: center;
            line-height: 1.2;
            transform: rotate(3deg);
        }
        #uo-landing .uo-hero-v2-bottom {
            display: flex;
            justify-content: center;
            width: 100%;
            margin-top: 80px;
            padding: 0 5%;
        }

        #uo-landing .uo-hero-v2-bottom .uo-btn-large {
            padding: 18px 48px;
            font-size: 1.15rem;
        }

        /* Explicitly center headers globally to fix Tilda overrides */
        #uo-landing .uo-features-header {
            text-align: center;
            margin-bottom: 64px;
        }

        #uo-landing .uo-features-header h2 {
            text-align: center !important;
            max-width: 600px;
            width: 100%;
            display: block;
            /* Was 24px — aligned to .uo-stacked-left h2's 32px, the biggest
               heading-to-body gap on the page, so every section reads the
               same. */
            margin: 0 auto 32px auto;
        }

        /* ===== Brands Ticker ===== */
        #uo-landing .uo-brands {
            padding: 60px 0;
            /* border-top removed: .uo-hero-v2's own border-bottom already
               draws the line at this boundary — every section now defines
               only border-bottom, so two adjacent sections never both draw
               a line at the same edge. */
            border-bottom: 1px solid var(--uo-border);
            background: rgba(255, 255, 255, 0.4);
            overflow: hidden;
            position: relative;
        }

        /* Gradient Mask for fading edges */
        #uo-landing .uo-brands::before,
        #uo-landing .uo-brands::after {
            content: "";
            position: absolute;
            top: 0;
            width: 15%;
            height: 100%;
            z-index: 2;
            pointer-events: none;
        }

        #uo-landing .uo-brands::before {
            left: 0;
            background: linear-gradient(to right, #f4f2e8 0%, rgba(244, 242, 232, 0) 100%);
        }

        #uo-landing .uo-brands::after {
            right: 0;
            background: linear-gradient(to left, #f4f2e8 0%, rgba(244, 242, 232, 0) 100%);
        }

        #uo-landing .uo-brands-inner {
            text-align: center;
        }

        #uo-landing .uo-brands-inner p {
            font-size: 0.95rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-top: 40px;
            padding: 0 5%;
        }

        #uo-landing .uo-brands-wrapper {
            width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            cursor: grab;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
            position: relative;
        }

        #uo-landing .uo-brands-wrapper::-webkit-scrollbar {
            display: none;
        }

        #uo-landing .uo-brands-wrapper:active {
            cursor: grabbing;
        }

        #uo-landing .uo-brands-row {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            width: max-content;
            will-change: transform;
            padding: 24px 0; /* Пространство для зума при ховере */
        }

        #uo-landing .uo-brands-track {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: 80px;
            padding-right: 80px;
            flex-shrink: 0;
        }

        #uo-landing .uo-brands-row:hover {
            opacity: 1;
        }

        #uo-landing .uo-brand-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            opacity: 1;
            transition: all 0.3s ease;
            flex-shrink: 0;
        }

        #uo-landing .uo-brand-item:hover {
            transform: translateY(-4px) scale(1.05);
        }

        #uo-landing .uo-brand-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 44px;
        }

        #uo-landing .uo-brand-logo img {
            max-height: 100%;
            max-width: 160px;
            width: auto;
            object-fit: contain;
            filter: grayscale(100%);
            transition: all 0.3s ease;
        }

        #uo-landing .uo-brand-item:hover .uo-brand-logo img {
            filter: grayscale(0%);
        }



        /* Promo Video Section */
        #uo-landing .uo-promo-section {
            padding: 20px 0 60px 0;
            width: 100%;
            border-bottom: 1px solid var(--uo-border);
        }
        
        #uo-landing .uo-promo-wrapper {
            width: 100%;
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            background: #000;
        }

        #uo-landing .uo-promo-desktop .uo-promo-wrapper {
            padding-top: 56.25%; /* 16:9 Aspect Ratio */
        }

        #uo-landing .uo-promo-mobile {
            display: none;
        }

        #uo-landing .uo-promo-mobile .uo-promo-wrapper {
            padding-top: 177.77%; /* 9:16 Aspect Ratio */
            border-radius: 0;
        }

        #uo-landing .uo-promo-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        /* The vertical promo video has a black bar baked into its bottom 5%
           (same in its poster frame) — scale from the top so it falls outside
           the wrapper's overflow:hidden. */
        #uo-landing .uo-promo-mobile .uo-promo-wrapper iframe,
        #uo-landing .uo-promo-mobile .uo-video-poster {
            transform: scale(1.06);
            transform-origin: top center;
        }

        /* Vertical 9:16 video only on phones — on tablets it would be taller than the screen */
        @media (max-width: 600px) {
            #uo-landing .uo-promo-desktop {
                display: none;
            }
            #uo-landing .uo-promo-mobile {
                display: block;
            }
        }

        @keyframes uo-marquee {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        /* ===== Features Grid ===== */
        #uo-landing .uo-features-header {
            text-align: center;
            margin-bottom: 64px;
        }

        #uo-landing .uo-features-header h2 {
            max-width: 600px;
            /* Was 24px — see the matching note on the first
               .uo-features-header h2 rule above; this later, duplicate
               declaration is the one that actually wins the cascade. */
            margin: 0 auto 32px auto;
        }

        #uo-landing .uo-grid-4 {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
        }

        #uo-landing .uo-feature-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: rgba(242, 88, 41, 0.1);
            color: var(--uo-accent);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin-bottom: 24px;
            transition: var(--uo-transition);
        }

        #uo-landing .uo-card:hover .uo-feature-icon {
            transform: scale(1.1);
            background: var(--uo-accent);
            color: #fff;
        }

        #uo-landing .uo-feature-title {
            font-size: 1.25rem;
            margin-bottom: 12px;
        }

        #uo-landing .uo-feature-desc {
            font-size: 1rem;
        }

        /* ===== Catalog ===== */
        #uo-landing .uo-catalog-section {
            background: var(--uo-card-bg);
            /* border-top removed: .uo-comparison-section's border-bottom
               already draws this line — see the note on .uo-brands above. */
            border-bottom: 1px solid var(--uo-border);
            /* Was min-height:100vh + flex-centered, meant to make this
               section fill exactly one screen on desktop. Measured: content
               is ~1770px tall at 1440x900 and ~1735px at 1920x1080 — it has
               overflowed a single viewport at every realistic desktop size
               for a while, so the min-height did nothing but leave this
               section as the one place on the page with non-standard,
               vertically-centered spacing instead of the plain top/bottom
               padding every other section uses. Dropped it for consistency. */
            padding: 120px 0;
            overflow: visible !important;
        }

        #uo-landing .uo-catalog-section .uo-container {
            width: 100%;
        }

        #uo-landing .uo-catalog-section .uo-features-header {
            margin-bottom: 40px;
        }

        #uo-landing .uo-catalog-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
            margin-top: 24px;
        }

        #uo-landing .uo-catalog-item {
            display: flex;
            flex-direction: column;
            padding: 24px;
            border: 1px solid var(--uo-border-card);
            border-radius: 40px;
            background: #fff;
            box-shadow: 0 4px 12px rgba(19, 33, 48, 0.04);
            transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.3s ease;
            text-decoration: none;
            cursor: pointer;
            will-change: transform;
        }

        #uo-landing .uo-catalog-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 24px rgba(19, 33, 48, 0.08);
        }

        #uo-landing .uo-catalog-img-wrap {
            width: 100%;
            aspect-ratio: 4 / 3;
            background: #f0f0f0;
            border-radius: 24px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
        }

        #uo-landing .uo-catalog-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        #uo-landing .uo-catalog-item:hover .uo-catalog-img-wrap img {
            transform: scale(1.05);
        }

        #uo-landing .uo-catalog-content {
            padding: 0 8px 8px;
            display: flex;
            flex-direction: column;
        }

        #uo-landing .uo-catalog-content h3 {
            font-size: 1.75rem;
            margin-bottom: 12px;
            font-weight: 700;
            color: var(--uo-text);
        }

        #uo-landing .uo-catalog-content p {
            font-size: 1.1rem;
            line-height: 1.5;
            color: var(--uo-text-muted);
            margin: 0;
        }

        /* ===== Audience Section ===== */
        #uo-landing .uo-audience {
            padding: 120px 0;
            background: #fff;
            border-bottom: 1px solid var(--uo-border);
        }

        #uo-landing .uo-audience-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            margin-bottom: 64px;
        }

        #uo-landing .uo-audience-card {
            background: #fff;
            border-radius: 32px;
            border: 1px solid var(--uo-border-card);
            overflow: hidden;
            transition: var(--uo-transition);
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        #uo-landing .uo-audience-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--uo-shadow-md);
            border-color: rgba(242, 88, 41, 0.2);
        }

        #uo-landing .uo-audience-img {
            width: 100%;
            aspect-ratio: 4 / 3;
            overflow: hidden;
        }

        #uo-landing .uo-audience-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        #uo-landing .uo-audience-card:hover .uo-audience-img img {
            transform: scale(1.05);
        }

        #uo-landing .uo-audience-body {
            padding: 24px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        #uo-landing .uo-audience-card h3 {
            font-size: 1.4rem;
            margin-bottom: 16px;
            line-height: 1.25;
            color: var(--uo-text);
        }

        #uo-landing .uo-audience-card p {
            font-size: 1rem;
            line-height: 1.5;
            color: var(--uo-text-muted);
            margin: 0;
        }

        #uo-landing .uo-audience-footer {
            display: flex;
            justify-content: center;
            width: 100%;
        }

        /* ===== Process Section (Stages) ===== */
        #uo-landing .uo-process {
            padding: 120px 0;
            background: #fcfcfc;
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid var(--uo-border);
        }

        #uo-landing .uo-process-container {
            position: relative;
            max-width: 1000px;
            margin: 0 auto;
        }

        #uo-landing .uo-process-line {
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 1px;
            background: linear-gradient(to bottom, transparent, var(--uo-border), var(--uo-border), transparent);
            transform: translateX(-50%);
            z-index: 1;
        }

        #uo-landing .uo-process-item {
            position: relative;
            margin-bottom: 50px;
            width: 100%;
            display: flex;
            align-items: center;
            z-index: 2;
        }

        #uo-landing .uo-process-item:last-child {
            margin-bottom: 0;
        }

        #uo-landing .uo-process-content {
            width: 45%;
            padding: 24px;
            background: #fff;
            border-radius: 20px;
            border: 1px solid var(--uo-border-card);
            box-shadow: 0 4px 12px rgba(19, 33, 48, 0.03);
            transition: var(--uo-transition);
        }

        #uo-landing .uo-process-item:hover .uo-process-content {
            border-color: var(--uo-accent);
            box-shadow: 0 12px 24px rgba(242, 88, 41, 0.08);
            transform: translateY(-4px);
        }

        /* Alternating layout */
        #uo-landing .uo-process-item:nth-child(odd) {
            justify-content: flex-end;
        }
        #uo-landing .uo-process-item:nth-child(even) {
            justify-content: flex-start;
        }

        #uo-landing .uo-process-marker {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 56px;
            height: 56px;
            background: #fff;
            border: 1px solid var(--uo-border);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.1rem;
            color: var(--uo-accent);
            transform: translate(-50%, -50%);
            z-index: 3;
            box-shadow: 0 0 0 8px #fcfcfc;
        }

        #uo-landing .uo-process-content h3 {
            font-size: 1.4rem;
            margin-bottom: 12px;
            color: var(--uo-text);
        }

        #uo-landing .uo-process-content p {
            font-size: 1.05rem;
            line-height: 1.5;
            color: var(--uo-text-muted);
            margin: 0;
        }

        #uo-landing .uo-process-footer {
            margin-top: 50px;
            text-align: center;
            position: relative;
            z-index: 5;
        }

        #uo-landing .uo-process-footer h4 {
            font-size: 1.75rem;
            margin-bottom: 12px;
            color: var(--uo-text);
        }

        #uo-landing .uo-process-footer p {
            font-size: 1.15rem;
            color: var(--uo-text-muted);
            margin-bottom: 40px;
        }

        #uo-landing .uo-catalog-btn-wrapper {
            text-align: center;
            margin-top: 48px;
        }

        #uo-landing .uo-catalog-btn-wrapper .uo-btn {
            /* Inherits default uo-btn styles (999px radius, etc) */
        }

        /* Production in Kazakhstan Section */
        #uo-landing .uo-production-kaz {
            background: #fff;
            /* Was 30px — the outlier of every content section's desktop
               padding (everything else clusters around 120px). */
            padding: 120px 0;
            border-bottom: 1px solid var(--uo-border);
        }

        #uo-landing .uo-production-kaz-header {
            margin-bottom: 20px;
            max-width: 1000px;
        }

        #uo-landing .uo-production-kaz-header h2 {
            /* No font-size: inherit the standard #uo-landing h2 scale
               (was a fixed 2.25rem that never scaled with viewport width,
               unlike every other section's fluid clamp()). */
            /* Was 12px, then 20px — now aligned to the page's biggest
               heading-to-body gap (32px, from .uo-stacked-left h2) so every
               section reads the same. */
            margin-bottom: 32px;
            color: var(--uo-text);
            font-weight: 700;
        }

        #uo-landing .uo-production-kaz-text p {
            font-size: 1.15rem;
            line-height: 1.6;
            color: var(--uo-text-muted);
            margin-bottom: 10px;
        }

        #uo-landing .uo-production-kaz-text p:last-child {
            margin-bottom: 0;
        }

        #uo-landing .uo-production-kaz-visual {
            width: 100%;
            margin-bottom: 20px;
        }

        #uo-landing .uo-production-img-placeholder {
            width: 100%;
            aspect-ratio: 16 / 7;
            border-radius: 24px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            background: #fcfcfc;
            border: 1px solid var(--uo-border);
        }

        #uo-landing .uo-production-img-placeholder img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        #uo-landing .uo-production-kaz-nav {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            margin-top: 16px;
        }

        #uo-landing .uo-nav-text {
            color: var(--uo-accent);
            font-weight: 700;
            font-size: 1.6rem;
            letter-spacing: -0.01em;
        }

        #uo-landing .uo-nav-arrow-wrapper {
            display: flex;
            justify-content: center;
            width: 100%;
        }

        #uo-landing .uo-nav-arrow {
            width: 38px;
            height: 38px;
            color: var(--uo-accent);
            animation: uo-bounce-down 2s infinite ease-in-out;
        }

        @keyframes uo-bounce-down {
            0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
            40% {transform: translateY(12px);}
            60% {transform: translateY(6px);}
        }

        /* Realized Projects Section */
        #uo-landing .uo-cases {
            background: #fff;
            padding: 120px 0;
            border-bottom: 1px solid var(--uo-border);
        }

        #uo-landing .uo-cases-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            margin-bottom: 48px;
        }

        #uo-landing .uo-case-card {
            background: #fff;
            border: 1px solid var(--uo-border);
            border-radius: 24px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: var(--uo-transition);
        }

        #uo-landing .uo-case-card:hover {
            border-color: var(--uo-accent);
            box-shadow: 0 12px 32px rgba(19, 33, 48, 0.08);
            transform: translateY(-8px);
        }

        #uo-landing .uo-case-img-wrap {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 10;
            overflow: hidden;
            background: #fcfcfc;
        }

        #uo-landing .uo-case-img-wrap img,
        #uo-landing .uo-case-img-wrap video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Still frame shown over a Vimeo embed until it actually starts
           playing (script.js fades it out on Vimeo's "playing" event) —
           instead of a black/empty box while the player loads. */
        #uo-landing .uo-video-poster {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            pointer-events: none;
            z-index: 1;
            transition: opacity 0.6s ease;
        }

        #uo-landing .uo-video-poster.is-hidden {
            opacity: 0;
        }

        /* Case videos have letterbox bars baked in and are scaled 1.25x to
           crop them — the poster frame has the same bars. */
        #uo-landing .uo-case-img-wrap .uo-video-poster {
            transform: scale(1.25);
        }

        #uo-landing .uo-case-content {
            padding: 24px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        #uo-landing .uo-case-category {
            color: #4A90E2;
            font-size: 0.95rem;
            font-weight: 600;
            margin-bottom: 12px;
        }

        #uo-landing .uo-case-content h3 {
            font-size: 1.4rem;
            margin-bottom: 20px;
            color: var(--uo-text);
            font-weight: 700;
        }

        #uo-landing .uo-case-info p {
            font-size: 0.95rem;
            line-height: 1.6;
            color: var(--uo-text-muted);
            margin-bottom: 12px;
        }

        #uo-landing .uo-case-info p:last-child {
            margin-bottom: 0;
        }

        #uo-landing .uo-case-info p strong {
            color: var(--uo-text);
        }

        #uo-landing .uo-cases-footer {
            text-align: center;
        }

        @media (max-width: 1024px) {
            #uo-landing .uo-catalog-section {
                height: auto;
                min-height: auto;
                padding-bottom: 80px;
            }

            /* Cases grid at tablet */
            #uo-landing .uo-cases-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;
            }
            /* 3 cases in 2 columns: centre the leftover one instead of
               leaving it stuck on the left with an empty cell beside it */
            #uo-landing .uo-cases-grid > :last-child:nth-child(odd) {
                grid-column: 1 / -1;
                justify-self: center;
                width: calc(50% - 10px);
            }
        }

        /* Catalog sticky stack: phones and portrait tablets only. Wider tablets
           keep the desktop 2-column grid — a single 480px card centred on a
           1024px screen left huge empty margins and ran for 3+ screens. */
        @media (max-width: 768px) {
            #uo-landing .uo-catalog-section .uo-container {
                position: relative;
                height: auto;
                display: block;
                /* No extra padding-top here: .uo-catalog-section already has
                   its own top padding (same #uo-section pattern every other
                   section uses). This was a leftover from the old JS-driven
                   sticky stack that needed breathing room above it — it just
                   doubled up the gap after the stack was rebuilt as plain
                   CSS, making this section's heading sit much further from
                   the top than every other section's. */
                overflow: visible;
            }

            #uo-landing .uo-catalog-sticky-wrapper {
                width: 100%;
            }

            /* Same technique as the "Наш мерч носят годами" stack below:
               plain flex column + position:sticky per card, staggered `top`
               offsets. No JS, no transform math — the browser's native sticky
               positioning drives the whole animation, which is why that
               section scrolls perfectly smoothly and this one now matches it. */
            #uo-landing .uo-catalog-grid {
                display: flex;
                flex-direction: column;
                gap: 24px;
                width: 100%;
                margin-top: 12px;
                padding-bottom: 40px;
            }

            #uo-landing .uo-catalog-item {
                position: sticky;
                width: 100%;
                max-width: 480px;
                margin: 0 auto;
                box-shadow: 0 12px 32px rgba(19, 33, 48, 0.15);
                border-width: 0.5px;
                background: #fff;
            }

            #uo-landing .uo-catalog-item:nth-child(1) { top: 80px; }
            #uo-landing .uo-catalog-item:nth-child(2) { top: 92px; }
            #uo-landing .uo-catalog-item:nth-child(3) { top: 104px; }
            #uo-landing .uo-catalog-item:nth-child(4) { top: 116px; }

            #uo-landing .uo-catalog-content h3 {
                font-size: 1.15rem;
                margin-bottom: 6px;
            }
            #uo-landing .uo-catalog-content p {
                font-size: 0.9rem;
            }
            #uo-landing .uo-catalog-item {
                padding: 16px;
                border-radius: 24px;
            }
            #uo-landing .uo-catalog-img-wrap {
                margin-bottom: 12px;
                border-radius: 16px;
                background: #f8f8f8;
            }

            #uo-landing .uo-catalog-btn-wrapper {
                position: relative;
                z-index: 20;
                margin-top: 32px;
                text-align: center;
            }
        }

        /* ===== Stacked Cards (Production) ===== */
        #uo-landing .uo-stacked-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 80px;
            margin-top: 0;
            /* Removed margin-top: 120px */
            position: relative;
        }

        #uo-landing .uo-stacked-left {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        #uo-landing .uo-stacked-left h2 {
            /* No font-size here: inherit the standard #uo-landing h2 scale
               (clamp(1.75rem, 4vw, 2.5rem)) instead of this section's own
               much larger clamp(2.5rem, 4vw, 3.5rem) — headings should read
               the same size across every section. */
            line-height: 1.25;
            margin-bottom: 32px;
            max-width: 900px;
            text-align: center !important;
            margin: 0 auto 32px !important;
            letter-spacing: -0.02em;
        }

        #uo-landing .uo-stacked-left p {
            font-size: 1.25rem;
            color: var(--uo-text-muted);
            max-width: 700px;
            line-height: 1.5;
            text-align: center;
            margin: 0 auto;
        }

        #uo-landing .uo-stacked-right {
            width: 100%;
            max-width: 1100px;
            display: flex;
            flex-direction: column;
            gap: 40px;
            padding-bottom: 120px;
        }

        #uo-landing .uo-stacked-card {
            background: #fff;
            border-radius: 32px;
            padding: 64px 80px;
            box-shadow: 0 -12px 32px -8px rgba(19, 33, 48, 0.04), 0 12px 32px -8px rgba(19, 33, 48, 0.08);
            position: sticky;
            border: 1px solid var(--uo-border-card);
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 80px;
            overflow: hidden;
            transition: transform 0.3s;
        }

        #uo-landing .uo-stacked-card:nth-child(1) {
            top: 120px;
        }

        #uo-landing .uo-stacked-card:nth-child(2) {
            top: 140px;
        }

        /* Stacked cards at tablet. Must come after the base rules above —
           when this lived in an earlier @media block the base padding/gap
           silently won and tablets got the full 64px/80px desktop spacing. */
        @media (max-width: 1024px) {
            #uo-landing .uo-stacked-right {
                padding-bottom: 60px;
            }
            #uo-landing .uo-stacked-card {
                padding: 40px;
                gap: 40px;
            }
        }

        /* ===== Popup Form ===== */
        #uo-landing .uo-popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 2000;
            display: flex;
            /* Centred via the container's margin:auto rather than
               align-items:center — on a short screen (phone in landscape,
               390px tall vs a 576px popup) align-items:center pushed the
               title, close button and submit button off-screen with no way
               to scroll to them. Auto margins centre when it fits and let
               the overlay scroll when it doesn't. */
            align-items: flex-start;
            justify-content: center;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 32px 0;
            opacity: 0;
            visibility: hidden;
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        #uo-landing .uo-popup-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        #uo-landing .uo-popup-container {
            width: 90%;
            max-width: 700px;
            margin: auto;
            background: #ffffff;
            border-radius: 32px;
            position: relative;
            padding: 48px;
            box-shadow: var(--uo-shadow-lg);
            transform: scale(0.9);
            transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            text-align: left;
            display: flex;
            flex-direction: column;
            border: 1px solid var(--uo-border);
        }

        #uo-landing .uo-popup-overlay.active .uo-popup-container {
            transform: scale(1);
        }

        #uo-landing .uo-popup-content {
            position: relative;
            z-index: 2;
            width: 100%;
        }

        #uo-landing .uo-popup-badge {
            position: absolute;
            top: -20px;
            right: -20px;
            background: var(--uo-accent);
            color: #fff;
            padding: 16px 24px;
            border-radius: 16px;
            font-weight: 700;
            font-size: 1.15rem;
            line-height: 1.2;
            text-align: center;
            box-shadow: 0 10px 25px rgba(242, 88, 41, 0.3);
            z-index: 5;
            transform: rotate(5deg);
            border: 2px solid #fff; /* White border to make it pop against the overlay */
        }

        #uo-landing .uo-popup-close {
            position: absolute;
            top: -32px;
            left: -32px;
            right: auto;
            background: none;
            border: none;
            color: #ffffff;
            font-size: 32px;
            cursor: pointer;
            /* 44px min tap target (was 40px) */
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
            opacity: 0.7;
            transition: opacity 0.2s, transform 0.2s;
        }

        #uo-landing .uo-popup-close:hover {
            opacity: 1;
            transform: scale(1.1);
        }

        #uo-landing .uo-popup-title {
            font-size: 1.75rem;
            color: var(--uo-text);
            margin-bottom: 20px;
            line-height: 1.2;
            font-weight: 700;
            max-width: 100%;
        }

        #uo-landing .uo-popup-subtitle {
            font-size: 1.1rem;
            color: var(--uo-text-muted);
            margin-bottom: 32px;
            font-weight: 400;
            line-height: 1.4;
            max-width: 90%;
        }

        #uo-landing .uo-popup-form {
            display: flex;
            flex-direction: column;
            gap: 24px;
            width: 100%;
        }

        #uo-landing .uo-input-group {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        #uo-landing .uo-label {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--uo-text);
        }

        #uo-landing .uo-popup-input {
            width: 100%;
            background: #ffffff;
            border: 1px solid var(--uo-border);
            padding: 18px 24px;
            border-radius: 20px;
            font-size: 1.1rem;
            font-family: inherit;
            color: var(--uo-text);
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        #uo-landing .uo-popup-input:focus {
            border-color: var(--uo-accent);
            box-shadow: 0 0 0 4px rgba(242, 88, 41, 0.1);
        }

        #uo-landing .uo-popup-input::placeholder {
            color: #bcc3cb;
        }

        #uo-landing .uo-popup-btn {
            background: var(--uo-accent);
            color: #fff;
            border: none;
            padding: 20px 32px;
            border-radius: 12px; /* Screenshot has slightly more angular but still rounded button, keeping uo-radius style */
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: var(--uo-transition);
            margin-top: 8px;
            width: 100%;
        }

        #uo-landing .uo-popup-btn:hover {
            background: var(--uo-accent-hover);
            transform: translateY(-2px);
            box-shadow: var(--uo-shadow-accent);
        }

        #uo-landing .uo-popup-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        /* Honeypot field: invisible to real visitors, still reachable by simple bots */
        #uo-landing .uo-hp-field {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
            overflow: hidden;
            pointer-events: none;
        }

        #uo-landing .uo-form-message {
            font-size: 0.9rem;
            margin-top: 4px;
            min-height: 1.2em;
        }

        /* Empty message slot would otherwise add two flex gaps above the submit button */
        #uo-landing .uo-form-message:empty {
            display: none;
        }

        #uo-landing .uo-form-message.uo-form-message-success {
            color: #1a7f37;
        }

        #uo-landing .uo-form-message.uo-form-message-error {
            color: var(--uo-accent);
        }

        @media (max-width : 768px) {
            /* full-screen sheet on phones — no gap around it */
            #uo-landing .uo-popup-overlay {
                padding: 0;
            }
            #uo-landing .uo-popup-container {
                padding: 40px 20px;
                width: 100%;
                border-radius: 0;
                height: 100%;
                max-width: 100%;
                max-height: 100vh;
                max-height: 100dvh;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }
            #uo-landing .uo-popup-badge {
                position: static;
                margin-bottom: 24px;
                max-width: none;
                display: inline-block;
                transform: none;
                /* compact pill like the static form's badge — stretched full
                   width it ran into the close button's corner */
                align-self: flex-start;
            }
            #uo-landing .uo-popup-title {
                max-width: 100%;
                font-size: 1.5rem;
            }
            #uo-landing .uo-popup-subtitle {
                max-width: 100%;
                font-size: 1rem;
            }
            #uo-landing .uo-popup-close {
                top: 12px;
                left: auto;
                right: 12px;
                color: var(--uo-text);
                font-size: 28px;
            }
            #uo-landing .uo-popup-input {
                padding: 16px 20px;
                font-size: 1rem;
                border-radius: 16px;
            }
        }

        #uo-landing .uo-stacked-card:nth-child(3) {
            top: 160px;
        }

        #uo-landing .uo-stacked-card:nth-child(4) {
            top: 180px;
        }

        #uo-landing .uo-stacked-card:nth-child(5) {
            top: 200px;
        }

        #uo-landing .uo-stacked-card-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        #uo-landing .uo-stacked-card h3 {
            font-size: 2.25rem;
            margin-bottom: 16px;
            font-weight: 700;
        }

        #uo-landing .uo-stacked-card p {
            font-size: 1.35rem;
            line-height: 1.6;
            color: var(--uo-text-muted);
        }

        #uo-landing .uo-stacked-card-visual {
            aspect-ratio: 4/3;
            flex: 1;
            border-radius: 20px;
            overflow: hidden;
            background: var(--uo-bg);
            display: flex;
            box-shadow: inset 0 0 0 1px var(--uo-border-card);
        }

        #uo-landing .uo-stacked-card-visual img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 20px;
            transition: transform 0.5s ease;
        }

        #uo-landing .uo-stacked-card:hover .uo-stacked-card-visual img {
            transform: scale(1.03);
        }


        /* ===== WhatsApp ===== */
        #uo-landing .uo-whatsapp {
            position: fixed;
            bottom: 32px;
            right: 32px;
            background-color: #25D366;
            color: #fff;
            width: 64px;
            height: 64px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
            z-index: 100;
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        #uo-landing .uo-whatsapp:hover {
            transform: scale(1.1);
        }

        #uo-landing .uo-whatsapp svg {
            width: 32px;
            height: 32px;
        }

        /* ===== Back to Top ===== */
        #uo-landing .uo-back-to-top {
            position: fixed;
            bottom: 32px;
            left: 32px;
            width: 64px;
            height: 64px;
            background: #fff;
            color: var(--uo-text);
            border: 1px solid var(--uo-border);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: var(--uo-shadow-md);
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        #uo-landing .uo-back-to-top.visible {
            opacity: 1;
            visibility: visible;
        }

        #uo-landing .uo-back-to-top:hover {
            transform: translateY(-5px);
            background: var(--uo-accent);
            color: #fff;
            border-color: var(--uo-accent);
            box-shadow: 0 12px 24px -6px rgba(242, 88, 41, 0.4);
        }

        #uo-landing .uo-back-to-top svg {
            width: 32px;
            height: 32px;
        }

        /* ===== Included in Price & Safety ===== */
        #uo-landing .uo-included-section {
            background: rgba(19, 33, 48, 0.02);
            padding: 120px 0;
            overflow: hidden;
            border-bottom: 1px solid var(--uo-border);
        }

        #uo-landing .uo-included-top {
            display: flex;
            gap: 60px;
            margin-bottom: 80px;
            align-items: flex-start;
        }

        #uo-landing .uo-included-info {
            flex: 1.2;
        }

        #uo-landing .uo-included-info h2 {
            /* No font-size: inherit the standard scale (was clamp(2rem, 4vw,
               2.5rem) — bigger minimum than the standard 1.75rem). */
            line-height: 1.2;
            /* Was 24px — aligned to the page's biggest heading-to-body gap
               (32px, from .uo-stacked-left h2). */
            margin-bottom: 32px;
            font-weight: 700;
            color: var(--uo-text);
        }

        #uo-landing .uo-included-info p {
            font-size: 1.15rem;
            line-height: 1.6;
            color: var(--uo-text-muted);
            max-width: 600px;
        }

        #uo-landing .uo-included-list-wrap {
            flex: 1;
            background: #fff;
            padding: 40px;
            border-radius: 32px;
            box-shadow: var(--uo-shadow-sm);
        }

        #uo-landing .uo-included-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        #uo-landing .uo-included-list li {
            position: relative;
            padding-left: 32px;
            font-size: 1.1rem;
            font-weight: 500;
            color: var(--uo-text);
            line-height: 1.4;
        }

        #uo-landing .uo-included-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 4px;
            width: 20px;
            height: 20px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f25829' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
        }

        #uo-landing .uo-safety-header {
            margin-bottom: 48px;
            text-align: center;
        }

        #uo-landing .uo-safety-header h2 {
            /* No font-size: inherit the standard scale (was its own
               clamp(1.75rem, 3vw, 2.25rem), capped 4px short of every
               other section's heading at desktop widths). */
            color: var(--uo-text);
        }

        #uo-landing .uo-safety-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 32px;
        }

        #uo-landing .uo-safety-card {
            background: #fff;
            padding: 40px 32px;
            border-radius: 32px;
            border: 1px solid var(--uo-border);
            transition: var(--uo-transition);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
        }

        #uo-landing .uo-safety-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--uo-shadow-lg);
            border-color: rgba(242, 88, 41, 0.2);
        }

        #uo-landing .uo-safety-icon {
            width: 56px;
            height: 56px;
            background: rgba(242, 88, 41, 0.1);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--uo-accent);
            margin-bottom: 24px;
        }

        #uo-landing .uo-safety-icon svg {
            width: 28px;
            height: 28px;
        }

        #uo-landing .uo-safety-card h3 {
            font-size: 1.35rem;
            margin-bottom: 16px;
            font-weight: 700;
            color: var(--uo-text);
        }

        #uo-landing .uo-safety-card p {
            font-size: 1.05rem;
            line-height: 1.6;
            color: var(--uo-text-muted);
            margin: 0;
        }

        @media (max-width: 1024px) {
            #uo-landing .uo-included-top {
                flex-direction: column;
                gap: 40px;
            }
            #uo-landing .uo-included-list-wrap {
                width: 100%;
            }
            #uo-landing .uo-safety-grid {
                grid-template-columns: 1fr 1fr;
            }
            /* 3 cards in 2 columns: stretch the leftover one across the row */
            #uo-landing .uo-safety-grid > :last-child:nth-child(odd) {
                grid-column: 1 / -1;
            }
        }

        @media (max-width: 768px) {
            #uo-landing .uo-included-section {
                padding: 60px 0;
            }
            #uo-landing .uo-safety-grid {
                grid-template-columns: 1fr;
            }
            #uo-landing .uo-included-list-wrap {
                padding: 32px 24px;
            }
            #uo-landing .uo-safety-card {
                padding: 32px 24px;
            }
        }

        /* ===== Static CTA Form ===== */
        #uo-landing .uo-static-cta-section {
            background: rgba(19, 33, 48, 0.02);
            /* Top was 20px — badly lopsided against its own 120px bottom
               and against every other section's top padding. */
            padding: 120px 0;
            border-bottom: 1px solid var(--uo-border);
        }

        #uo-landing .uo-static-form-box {
            margin: 0 auto;
            max-width: 800px;
            background: #fff;
            padding: 60px;
            border-radius: 40px;
            position: relative;
            box-shadow: var(--uo-shadow-lg);
            border: 1px solid var(--uo-border);
        }

        @media (max-width: 768px) {
            #uo-landing .uo-static-form-box {
                padding: 40px 24px;
                border-radius: 24px;
            }
        }

        /* ===== FAQ Section ===== */
        #uo-landing .uo-faq-section {
            background: #fff;
            padding: 120px 0;
        }

        #uo-landing .uo-faq-header {
            /* No font-size: inherit the standard scale (was its own
               clamp(2rem, 4vw, 3rem) — noticeably bigger than every other
               section's heading). */
            text-align: center;
            margin-bottom: 60px;
            font-weight: 700;
            color: var(--uo-text);
        }

        #uo-landing .uo-faq-grid {
            display: grid;
            grid-template-columns: 350px 1fr;
            gap: 80px;
            align-items: start;
        }

        #uo-landing .uo-faq-sidebar {
            position: sticky;
            top: 120px;
        }

        #uo-landing .uo-faq-contact {
            background: rgba(19, 33, 48, 0.02);
            padding: 40px;
            border-radius: 32px;
            border: 1px solid var(--uo-border);
        }

        #uo-landing .uo-faq-contact h3 {
            font-size: 1.5rem;
            margin-bottom: 16px;
            font-weight: 700;
            line-height: 1.2;
            color: var(--uo-text);
        }

        #uo-landing .uo-faq-contact p {
            font-size: 1.05rem;
            color: var(--uo-text-muted);
            margin-bottom: 32px;
            line-height: 1.5;
        }

        #uo-landing .uo-faq-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        #uo-landing .uo-faq-item {
            border: 1px solid var(--uo-border);
            border-radius: 20px;
            overflow: hidden;
            transition: var(--uo-transition);
            background: #fff;
        }

        #uo-landing .uo-faq-item:hover {
            border-color: rgba(242, 88, 41, 0.3);
        }

        #uo-landing .uo-faq-item.active {
            border-color: var(--uo-accent);
            box-shadow: var(--uo-shadow-sm);
        }

        #uo-landing .uo-faq-question {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: none;
            border: none;
            padding: 24px 32px;
            text-align: left;
            cursor: pointer;
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--uo-text);
            font-family: inherit;
        }

        #uo-landing .uo-faq-icon {
            width: 24px;
            height: 24px;
            position: relative;
            flex-shrink: 0;
            transition: transform 0.3s ease;
        }

        #uo-landing .uo-faq-icon::before,
        #uo-landing .uo-faq-icon::after {
            content: "";
            position: absolute;
            background: var(--uo-accent);
            border-radius: 2px;
            transition: all 0.3s ease;
        }

        #uo-landing .uo-faq-icon::before {
            width: 100%;
            height: 2px;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }

        #uo-landing .uo-faq-icon::after {
            width: 2px;
            height: 100%;
            left: 50%;
            top: 0;
            transform: translateX(-50%);
        }

        #uo-landing .uo-faq-item.active .uo-faq-icon {
            transform: rotate(135deg);
        }

        #uo-landing .uo-faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
            opacity: 0;
        }

        #uo-landing .uo-faq-item.active .uo-faq-answer {
            max-height: 600px;
            opacity: 1;
        }

        #uo-landing .uo-faq-answer-content {
            padding: 0 32px 32px 32px;
            font-size: 1.15rem;
            line-height: 1.6;
            color: var(--uo-text-muted);
        }

        @media (max-width: 1024px) {
            #uo-landing .uo-faq-grid {
                grid-template-columns: 1fr;
                gap: 40px;
            }
            #uo-landing .uo-faq-sidebar {
                position: static;
                order: 2;
            }
            #uo-landing .uo-faq-main {
                order: 1;
            }
        }

        @media (max-width: 768px) {
            #uo-landing .uo-faq-section {
                padding: 60px 0;
            }
            #uo-landing .uo-faq-header {
                margin-bottom: 40px;
            }
            #uo-landing .uo-faq-question {
                font-size: 1.15rem;
                padding: 20px 24px;
            }
            #uo-landing .uo-faq-answer-content {
                padding: 0 24px 24px 24px;
                font-size: 1.05rem;
            }
            #uo-landing .uo-faq-contact {
                padding: 32px 24px;
            }
        }

        /* ===== Footer ===== */
        #uo-landing .uo-footer {
            background: #fff;
            padding: 0;
            overflow: hidden;
            border-top: 1px solid var(--uo-border);
        }

        /* Manager CTA Block */
        #uo-landing .uo-manager-section {
            background: #fff;
            padding: 100px 0;
            text-align: center;
        }

        #uo-landing .uo-manager-card {
            max-width: 800px;
            margin: 0 auto;
        }

        #uo-landing .uo-manager-card h2 {
            font-size: clamp(1.5rem, 3vw, 2.25rem);
            font-weight: 700;
            margin-bottom: 16px;
            color: var(--uo-text);
        }

        #uo-landing .uo-manager-card p {
            font-size: 1.15rem;
            color: var(--uo-text-muted);
            margin-bottom: 40px;
            line-height: 1.5;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        #uo-landing .uo-btn-whatsapp {
            background: #25D366;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 20px 48px;
            border-radius: 60px;
            font-weight: 700;
            font-size: 1.15rem;
            text-decoration: none;
            transition: var(--uo-transition);
            box-shadow: 0 10px 30px rgba(37, 211, 102, 0.2);
            font-family: inherit;
        }

        #uo-landing .uo-btn-whatsapp:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(37, 211, 102, 0.3);
            filter: brightness(1.05);
        }

        #uo-landing .uo-btn-whatsapp svg {
            width: 24px;
            height: 24px;
        }

        /* Main Footer Grid */
        #uo-landing .uo-footer-main {
            padding: 80px 0;
            background: rgba(19, 33, 48, 0.01);
            border-top: 1px solid var(--uo-border);
        }

        #uo-landing .uo-footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            gap: 60px;
            align-items: start;
        }

        #uo-landing .uo-footer-logo {
            margin-bottom: 24px;
        }

        #uo-landing .uo-footer-logo img {
            height: 32px;
            width: auto;
        }

        #uo-landing .uo-footer-desc {
            color: var(--uo-text-muted);
            font-size: 1rem;
            line-height: 1.6;
            max-width: 260px;
        }

        #uo-landing .uo-footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        #uo-landing .uo-footer-links a {
            color: var(--uo-text);
            text-decoration: none;
            font-size: 1.05rem;
            transition: color 0.2s;
        }

        #uo-landing .uo-footer-links a:hover {
            color: var(--uo-accent);
        }

        #uo-landing .uo-footer-contacts {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        #uo-landing .uo-footer-contacts p {
            margin: 0;
            font-size: 1.05rem;
            color: var(--uo-text);
        }

        #uo-landing .uo-footer-contacts a {
            color: inherit;
            text-decoration: none;
            transition: color 0.2s;
        }

        #uo-landing .uo-footer-contacts a:hover {
            color: var(--uo-accent);
        }

        @media (max-width: 1024px) {
            #uo-landing .uo-footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 40px;
            }
            #uo-landing .uo-footer-col-brand {
                grid-column: span 2;
            }
        }

        @media (max-width: 768px) {
            #uo-landing .uo-footer-grid {
                grid-template-columns: 1fr;
                text-align: center;
            }
            #uo-landing .uo-footer-col-brand {
                grid-column: span 1;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            #uo-landing .uo-footer-logo {
                margin-bottom: 16px;
            }
            #uo-landing .uo-footer-desc {
                max-width: 100%;
            }
            #uo-landing .uo-btn-whatsapp {
                width: 100%;
                padding: 16px 20px;
                font-size: 1rem;
            }
            #uo-landing .uo-manager-section {
                padding: 60px 0;
            }
            #uo-landing .uo-footer-main {
                padding: 60px 0;
            }
        }

        /* ==============================
     RESPONSIVE
  ============================== */
        @media (max-width: 1024px) {
            #uo-landing .uo-stacked-card-visual {
                aspect-ratio: 16/9;
            }

            #uo-landing .uo-nav,
            #uo-landing .uo-header-actions {
                display: none;
            }

            #uo-landing .uo-hamburger {
                display: flex;
            }

            #uo-landing .uo-mobile-nav {
                display: block;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                height: 100vh;
                height: 100dvh;
                background: rgba(244, 242, 232, 0.98);
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                padding: 80px 5% 40px;
                z-index: 99;
                transform: translateY(-100%);
                transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }

            #uo-landing .uo-menu-toggle:checked~.uo-mobile-nav {
                transform: translateY(0);
            }

            /* The header's own backdrop-filter becomes the backdrop root for
               the nested menu, so the open menu showed the page through it
               (hero text clearly visible behind the links). Drop the header
               blur while the menu is open. */
            #uo-landing .uo-header:has(.uo-menu-toggle:checked) {
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }

            #uo-landing .uo-mobile-nav a {
                display: block;
                padding: 16px 0;
                font-weight: 700;
                font-size: 1.125rem;
                color: var(--uo-text);
                border-bottom: 1px solid var(--uo-border);
                transition: color 0.2s;
            }

            #uo-landing .uo-mobile-nav a:last-child {
                border-bottom: none;
            }

            #uo-landing .uo-mobile-nav a:hover {
                color: var(--uo-accent);
            }

            #uo-landing .uo-mobile-nav .uo-btn {
                margin-top: 24px;
                width: 100%;
                text-align: center;
            }

            #uo-landing .uo-header-socials {
                display: none; /* Hide icons in mobile header to save space */
            }

            /* Base layout for the icon row inside .uo-mobile-nav — lives here
               (not only in the max-width:480px block below) because the
               hamburger menu itself is already active from 1024px down;
               leaving this undefined between 481-1024px stacked the icons
               in an unstyled column instead of a row. */
            #uo-landing .uo-mobile-socials {
                display: flex;
                gap: 16px;
                margin: 24px 0;
                justify-content: flex-start;
            }

            #uo-landing .uo-mobile-socials .uo-social-icon {
                width: 48px;
                height: 48px;
                background: #fff;
                border: 1px solid var(--uo-border);
                box-shadow: var(--uo-shadow-sm);
            }

            /* #uo-landing .uo-mobile-nav a (generic menu-link rule) carries an
               ID, so it outranks .uo-social-icon's flex centering and leaks
               display:block/padding/border-bottom onto these circular icon
               links too — restated here with matching specificity to win. */
            #uo-landing .uo-mobile-nav a.uo-social-icon {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0;
                border-bottom: none;
            }

            #uo-landing .uo-mobile-socials .uo-social-icon:active {
                background: var(--uo-accent);
                color: #fff;
                transform: scale(0.95);
            }

            #uo-landing .uo-floating-card {
                position: absolute;
                bottom: -16px;
                left: 16px;
                margin-top: 0;
                animation: none;
            }

            /* Hero V2 at 1024px */
            #uo-landing .uo-hero-v2-main {
                flex-direction: column;
                align-items: stretch;
                gap: 48px;
            }

            #uo-landing .uo-hero-v2-left {
                align-items: center;
                text-align: center;
            }

            #uo-landing .uo-hero-v2-text .uo-badge {
                align-self: center;
            }

            #uo-landing .uo-hero-v2-desc {
                margin: 0 auto 40px;
            }

            #uo-landing .uo-hero-v2-features-grid {
                text-align: left;
                gap: 28px 20px;
            }

            #uo-landing .uo-floating-badge {
                left: 10px;
                bottom: -15px;
                animation: none;
            }

            #uo-landing .uo-hero-v2-image-wrap {
                max-width: 360px;
            }

            #uo-landing .uo-audience-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;
            }

            #uo-landing .uo-process-content {
                width: 42%;
            }

            /* Features grid: 2 columns on tablet */
            #uo-landing .uo-grid-4 {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 991px) {
            #uo-landing .uo-promo-section {
                padding: 0 0 40px 0;
            }

            #uo-landing .uo-brands {
                padding: 40px 0;
            }

            #uo-landing .uo-features-header {
                margin-bottom: 40px;
            }
        }

        /* Audience cards: 2 columns on tablets, 1 column only on phones */
        @media (max-width: 600px) {
            #uo-landing .uo-audience-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            #uo-landing .uo-section {
                padding: 80px 0;
            }

            #uo-landing .uo-features-header {
                margin-bottom: 40px;
            }

            #uo-landing .uo-card {
                padding: 24px;
            }

            #uo-landing .uo-catalog-content {
                padding: 32px 40px;
            }

            #uo-landing .uo-catalog-content h3 {
                font-size: 1.75rem;
            }

            #uo-landing .uo-catalog-content p {
                font-size: 1.15rem;
            }

            #uo-landing .uo-catalog-btn-wrapper {
                margin-top: 40px;
            }

            #uo-landing .uo-stacked-card {
                flex-direction: column;
                padding: 24px;
                border-radius: 20px;
                gap: 24px;
            }

            /* Reduce sticky top offsets */
            #uo-landing .uo-stacked-card:nth-child(1) { top: 80px; }
            #uo-landing .uo-stacked-card:nth-child(2) { top: 92px; }
            #uo-landing .uo-stacked-card:nth-child(3) { top: 104px; }
            #uo-landing .uo-stacked-card:nth-child(4) { top: 116px; }
            #uo-landing .uo-stacked-card:nth-child(5) { top: 128px; }

            #uo-landing .uo-stacked-right {
                padding-bottom: 40px;
            }

            #uo-landing .uo-stacked-container {
                gap: 48px;
            }

            #uo-landing .uo-brand-logo {
                font-size: 1.25rem;
            }

            /* Hero V2 at 768px */
            #uo-landing .uo-hero-v2-main {
                gap: 40px;
            }

            #uo-landing .uo-hero-v2-features-grid {
                grid-template-columns: 1fr 1fr;
            }

            #uo-landing .uo-hero-v2-image-wrap {
                max-width: 340px;
            }

            #uo-landing .uo-hero-v2-bottom {
                margin-top: 48px;
            }

            #uo-landing .uo-audience {
                padding: 80px 0;
            }
            #uo-landing .uo-audience-card h3 {
                font-size: 1.25rem;
            }

            #uo-landing .uo-process {
                padding: 80px 0;
            }
            #uo-landing .uo-process-line {
                left: 28px;
                transform: none;
            }
            #uo-landing .uo-process-marker {
                left: 28px;
                transform: translate(-50%, -50%);
            }
            #uo-landing .uo-process-item {
                justify-content: flex-start !important;
                padding-left: 70px;
                margin-bottom: 30px;
            }
            #uo-landing .uo-process-content {
                width: 100%;
                padding: 24px;
            }
            #uo-landing .uo-process-footer h4 {
                font-size: 1.5rem;
            }

            /* Production Kaz Mobile — matches the standard .uo-section
               768px-tier padding (was a mismatched 60px). */
            #uo-landing .uo-production-kaz {
                padding: 80px 0;
            }
            #uo-landing .uo-production-kaz-text p {
                font-size: 1.05rem;
            }
            #uo-landing .uo-production-img-placeholder {
                aspect-ratio: 4 / 3;
                border-radius: 20px;
            }
            #uo-landing .uo-nav-text {
                font-size: 1.35rem;
            }

            /* Cases Mobile */
            #uo-landing .uo-cases-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            #uo-landing .uo-cases-grid > :last-child:nth-child(odd) {
                justify-self: stretch;
                width: auto;
            }
            #uo-landing .uo-case-content h3 {
                font-size: 1.25rem;
            }

            /* Features grid: 1 column on mobile */
            #uo-landing .uo-grid-4 {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            /* Static CTA form badge fix */
            #uo-landing .uo-static-form-box .uo-popup-badge {
                position: static;
                margin-bottom: 24px;
                display: inline-block;
                transform: none;
            }

            /* Manager section mobile */
            #uo-landing .uo-manager-card p {
                font-size: 1rem;
            }

            /* Audience footer button mobile */
            #uo-landing .uo-audience-footer .uo-btn {
                width: 100%;
                justify-content: center;
            }

            /* Process footer button mobile */
            #uo-landing .uo-process-footer .uo-btn {
                width: 100%;
                justify-content: center;
            }

            /* Cases footer button mobile */
            #uo-landing .uo-cases-footer .uo-btn {
                width: 100%;
                justify-content: center;
            }
        }

        @media (max-width: 480px) {
            #uo-landing .uo-container {
                padding: 0 5%;
            }

            #uo-landing .uo-section,
            #uo-landing .uo-audience,
            #uo-landing .uo-process {
                /* .uo-audience and .uo-process have their own base padding
                   rule (not .uo-section) that happens to match at 120px/80px,
                   but neither had a step-down below 768px — so they got
                   stuck at 80px while every .uo-section-based block dropped
                   to 56px, making their heading-to-edge gap visibly bigger. */
                padding: 56px 0;
            }

            #uo-landing .uo-brands {
                padding: 40px 0;
            }

            #uo-landing .uo-brands-track {
                gap: 40px;
                padding-right: 40px;
            }

            #uo-landing .uo-brand-logo {
                height: 36px;
            }

            #uo-landing .uo-brand-logo img {
                max-width: 120px;
            }

            #uo-landing .uo-catalog-content {
                padding: 0;
            }

            #uo-landing .uo-catalog-content h3 {
                font-size: 1.3rem;
            }

            #uo-landing .uo-catalog-content p {
                font-size: 0.95rem;
            }



            #uo-landing .uo-catalog-btn-wrapper {
                margin-top: 32px;
            }

            #uo-landing .uo-catalog-btn-wrapper .uo-btn {
                width: 100%;
                justify-content: center;
            }

            #uo-landing .uo-link-arrow {
                min-height: 44px;
                display: inline-flex;
                align-items: center;
            }

            #uo-landing .uo-stacked-card-content h3 {
                font-size: 1.5rem;
            }

            #uo-landing .uo-stacked-card p {
                font-size: 1.15rem;
            }

            #uo-landing .uo-stacked-card-visual {
                aspect-ratio: 4/3;
                border-radius: 16px;
                width: 100%;
            }



            /* WhatsApp */
            #uo-landing .uo-whatsapp {
                width: 56px;
                height: 56px;
                bottom: 20px;
                right: 20px;
            }

            #uo-landing .uo-whatsapp svg {
                width: 28px;
                height: 28px;
            }

            #uo-landing .uo-back-to-top {
                width: 56px;
                height: 56px;
                bottom: 20px;
                left: 20px;
            }

            #uo-landing .uo-back-to-top svg {
                width: 28px;
                height: 28px;
            }

            #uo-landing .uo-btn-lg {
                padding: 16px 28px;
                font-size: 1rem;
            }

            /* Hero V2 at 480px */
            #uo-landing .uo-hero-v2 {
                padding: 100px 0 80px;
                /* Increased bottom padding to show photo frame/shadow */
            }

            #uo-landing .uo-hero-v2-main {
                gap: 32px;
            }

            #uo-landing .uo-hero-v2-title {
                margin-bottom: 24px;
            }

            #uo-landing .uo-hero-v2-desc {
                font-size: 1.1rem;
                margin-bottom: 40px;
            }

            #uo-landing .uo-hero-v2-image-wrap {
                width: calc(100% - 40px);
                max-width: 320px;
                margin: 20px auto 0;
                position: relative;
                box-sizing: border-box;
                aspect-ratio: 4/5;
                transform: translateX(-12px);
            }

            #uo-landing .uo-hero-v2-image-inner {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

            #uo-landing .uo-hero-v2-image-wrap img {
                border-radius: 20px;
                border: 6px solid #fff;
            }

            #uo-landing .uo-hero-v2-image-wrap img.uo-card-mid {
                transform: translate(12px, -12px) rotate(2deg);
            }

            #uo-landing .uo-hero-v2-image-wrap img.uo-card-bot {
                transform: translate(24px, -24px) rotate(4deg);
            }

            #uo-landing .uo-hero-v2-right {
                width: 100%;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                position: relative;
                padding-bottom: 60px; /* Increased to allow badges to stick out more */
            }

            #uo-landing .uo-floating-badge {
                position: absolute;
                bottom: -40px; /* Moved further down */
                right: -25px; /* Moved further right */
                left: auto;
                margin: 0;
                width: fit-content;
                max-width: 190px; /* More compact */
                box-shadow: var(--uo-shadow-lg);
                padding: 12px 16px;
                font-size: 0.85rem;
                gap: 10px;
                z-index: 20;
                transform: rotate(-2deg) !important; /* Slight organic tilt */
                border: none;
                background: #fff;
                border-radius: 12px;
            }

            #uo-landing .uo-emotional-sticker {
                top: auto !important;
                bottom: 25px !important; /* Lower position */
                right: -30px !important; /* Further right */
                left: auto !important;
                font-size: 0.8rem;
                padding: 12px 16px;
                max-width: 150px; /* More compact */
                transform: rotate(3deg) !important;
                z-index: 15;
                border-radius: 12px;
                box-shadow: var(--uo-shadow-lg);
                background: var(--uo-accent);
                animation: none;
                text-align: center;
            }

            /* Base row layout + icon sizing for .uo-mobile-socials now live
               in the max-width:1024px block above (same place the hamburger
               menu itself activates) — only phone-specific fine-tuning
               stays here. */
            #uo-landing .uo-footer-contacts .uo-footer-socials {
                justify-content: center;
                margin-top: 36px; /* Increased for mobile too */
            }

            .uo-footer-socials .uo-social-icon {
                width: 44px;
                height: 44px;
            }

            #uo-landing .uo-hero-v2-features-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            #uo-landing .uo-hero-v2-bottom {
                margin-top: 48px;
            }

            #uo-landing .uo-hero-v2-bottom .uo-btn-large,
            #uo-landing .uo-hero-v2-bottom .uo-btn {
                width: 100%;
                justify-content: center;
                padding: 16px 24px;
            }

            #uo-landing .uo-hero-v2-feature-icon {
                width: 36px;
                height: 36px;
            }

            #uo-landing .uo-hero-v2-feature-icon svg {
                width: 18px;
                height: 18px;
            }

            #uo-landing .uo-hero-v2-feature-text h4 {
                font-size: 0.95rem;
            }

            #uo-landing .uo-hero-v2-feature-text p {
                /* Was 0.8rem (12.8px) — no reason to shrink further than the
                   480px breakpoint's 0.85rem just because the screen got a
                   little narrower still. */
                font-size: 0.85rem;
            }

            /* Stacked card sticky top on small mobile */
            #uo-landing .uo-stacked-card:nth-child(1) { top: 70px; }
            #uo-landing .uo-stacked-card:nth-child(2) { top: 80px; }
            #uo-landing .uo-stacked-card:nth-child(3) { top: 90px; }
            #uo-landing .uo-stacked-card:nth-child(4) { top: 100px; }
            #uo-landing .uo-stacked-card:nth-child(5) { top: 110px; }

            #uo-landing .uo-stacked-right {
                padding-bottom: 20px;
                gap: 24px;
            }

            #uo-landing .uo-stacked-container {
                gap: 32px;
            }

            #uo-landing .uo-stacked-left p {
                font-size: 1.05rem;
            }

            /* Static CTA badge on small mobile */
            #uo-landing .uo-static-form-box {
                padding: 32px 20px;
                border-radius: 20px;
            }
            #uo-landing .uo-static-form-box .uo-popup-badge {
                position: static;
                transform: none;
                margin-bottom: 20px;
                display: inline-block;
            }

            /* Comparison section mobile */
            #uo-landing .uo-chat-msg {
                padding: 14px 18px;
                font-size: 1.05rem;
            }
            #uo-landing .uo-chat-sender {
                font-size: 0.95rem;
            }

            /* Catalog section min-height fix */
            #uo-landing .uo-catalog-section {
                min-height: auto;
                padding: 56px 0 80px;
            }

            /* Matches the standard .uo-section 480px-tier padding
               (was a mismatched 40px). */
            #uo-landing .uo-production-kaz {
                padding: 56px 0;
            }

            /* Cases section padding fix */
            #uo-landing .uo-cases {
                padding: 56px 0;
            }

            /* Included section improvements */
            #uo-landing .uo-included-list li {
                font-size: 1rem;
            }

            /* FAQ improvements */
            #uo-landing .uo-faq-section {
                padding: 56px 0;
            }
            #uo-landing .uo-faq-question {
                font-size: 1.05rem;
                padding: 18px 20px;
            }
            #uo-landing .uo-faq-answer-content {
                padding: 0 20px 20px 20px;
                font-size: 1rem;
            }
            #uo-landing .uo-faq-contact {
                padding: 28px 20px;
            }
            #uo-landing .uo-faq-contact .uo-btn {
                width: 100%;
                justify-content: center;
            }

            /* Footer mobile improvements */
            #uo-landing .uo-manager-section {
                padding: 48px 0;
            }
            #uo-landing .uo-footer-main {
                padding: 48px 0;
            }

            /* Process marker smaller on mobile */
            #uo-landing .uo-process-marker {
                width: 44px;
                height: 44px;
                font-size: 0.95rem;
            }
        }

        @media (max-width: 375px) {
            #uo-landing .uo-container {
                padding: 0 16px;
            }

            #uo-landing .uo-section,
            #uo-landing .uo-audience,
            #uo-landing .uo-process {
                padding: 44px 0;
            }



            #uo-landing p {
                /* Was 0.95rem (15.2px) — keep body copy at/above the 16px
                   floor recommended for mobile reading comfort. */
                font-size: 1rem;
            }

            #uo-landing .uo-badge {
                font-size: 0.75rem;
                padding: 5px 12px;
            }

            #uo-landing .uo-card {
                padding: 20px;
            }

            #uo-landing .uo-feature-icon {
                width: 40px;
                height: 40px;
                margin-bottom: 16px;
            }

            #uo-landing .uo-feature-title {
                font-size: 1.1rem;
            }

            #uo-landing .uo-feature-desc {
                font-size: 0.9rem;
            }

            #uo-landing .uo-catalog-item {
                padding: 16px;
            }



            #uo-landing .uo-whatsapp {
                width: 48px;
                height: 48px;
                bottom: 16px;
                right: 16px;
            }

            #uo-landing .uo-whatsapp svg {
                width: 24px;
                height: 24px;
            }

            #uo-landing .uo-back-to-top {
                width: 48px;
                height: 48px;
                bottom: 16px;
                left: 16px;
            }

            #uo-landing .uo-back-to-top svg {
                width: 24px;
                height: 24px;
            }

            /* Hero V2 at 375px */
            #uo-landing .uo-hero-v2 {
                padding: 90px 0 40px;
            }

            /* hero-v2-title font-size is handled by JS */

            #uo-landing .uo-hero-v2-features-grid {
                gap: 16px;
            }

            #uo-landing .uo-brands-track {
                gap: 20px;
                padding-right: 20px;
            }

            #uo-landing .uo-brand-logo {
                font-size: 0.85rem;
            }
        }

        @media (max-width: 320px) {


            #uo-landing .uo-btn {
                padding: 12px 20px;
                font-size: 0.9rem;
            }

            #uo-landing .uo-btn-lg {
                padding: 14px 24px;
                font-size: 0.9rem;
            }

            /* uo-brands-row remains flex for marquee */

            /* hero-v2-title font-size is handled by JS */

            #uo-landing .uo-section-subtitle {
                font-size: 1rem;
            }
        }


        /* ===== Gallery Modal ===== */
        #uo-landing .uo-gallery-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(19, 33, 48, 0.98);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        #uo-landing .uo-gallery-modal.active {
            display: flex;
            opacity: 1;
        }

        #uo-landing .uo-gallery-content {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        #uo-landing .uo-gallery-image-container {
            position: relative;
            max-width: 90%;
            max-height: 85vh;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6);
            background: transparent;
            display: inline-block;
            pointer-events: auto;
        }

        #uo-landing .uo-gallery-img {
            display: block;
            max-width: 100%;
            max-height: 85vh;
            width: auto;
            height: auto;
            transition: opacity 0.3s ease;
        }

        #uo-landing .uo-gallery-info {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 80px 32px 32px;
            text-align: left;
            transition: all 0.4s ease;
            pointer-events: none;
            z-index: 10;
        }

        #uo-landing .uo-gallery-info.text-dark {
            color: #132130;
            background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.6) 40%, rgba(255, 255, 255, 0) 100%);
        }

        #uo-landing .uo-gallery-info.text-light {
            color: #fff;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0) 100%);
        }

        #uo-landing .uo-gallery-desc {
            font-size: clamp(1rem, 2.5vw, 1.25rem);
            font-weight: 700;
            margin-bottom: 8px;
            line-height: 1.4;
            max-width: 100%;
            white-space: normal;
            overflow-wrap: break-word;
        }

        #uo-landing .uo-gallery-counter {
            font-size: 0.9rem;
            opacity: 0.6;
            font-weight: 400;
            letter-spacing: 0.05em;
        }

        #uo-landing .uo-gallery-close {
            position: absolute;
            top: 32px;
            right: 32px;
            color: #fff;
            font-size: 48px;
            cursor: pointer;
            background: none;
            border: none;
            padding: 10px;
            transition: var(--uo-transition);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10001;
            line-height: 1;
            opacity: 0.8;
        }

        #uo-landing .uo-gallery-close:hover {
            transform: scale(1.1);
            opacity: 1;
        }

        #uo-landing .uo-gallery-close::after {
            content: 'Закрыть';
            font-size: 1rem;
            font-weight: 700;
            margin-left: 8px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        #uo-landing .uo-gallery-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #fff;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--uo-transition);
            z-index: 100;
            backdrop-filter: blur(8px);
            pointer-events: auto;
        }

        #uo-landing .uo-gallery-nav:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-50%) scale(1.1);
            border-color: rgba(255, 255, 255, 0.5);
        }

        #uo-landing .uo-gallery-prev {
            left: 40px;
        }

        #uo-landing .uo-gallery-next {
            right: 40px;
        }

        #uo-landing .uo-gallery-nav svg {
            width: 24px;
            height: 24px;
        }

        @media (max-width: 1200px) {
            #uo-landing .uo-gallery-prev {
                left: -80px;
            }

            #uo-landing .uo-gallery-next {
                right: -80px;
            }
        }

        @media (max-width: 1024px) {
            #uo-landing .uo-gallery-content {
                height: 75vh;
                width: 95%;
            }

            #uo-landing .uo-gallery-close {
                top: 16px;
                right: 16px;
                font-size: 36px;
                padding: 0;
                /* Icon-only tap target — keep it at the 44px minimum even
                   though the "×" glyph itself renders smaller. */
                width: 44px;
                height: 44px;
            }

            #uo-landing .uo-gallery-close::after {
                display: none;
            }

            #uo-landing .uo-gallery-nav {
                width: 48px;
                height: 48px;
            }

            #uo-landing .uo-gallery-prev {
                left: 16px;
            }

            #uo-landing .uo-gallery-next {
                right: 16px;
            }

            #uo-landing .uo-gallery-info {
                padding: 32px 20px 20px;
            }

            #uo-landing .uo-gallery-desc {
                font-size: 1.1rem;
            }
        }
        /* ===== Comparison Section ===== */
        #uo-landing .uo-comparison-section {
            background: #f4f2e8; /* Default background of site */
            border-bottom: 1px solid var(--uo-border);
        }

        #uo-landing .uo-comparison-header h2 {
            text-align: center;
            /* No font-size: inherit the standard scale (was its own
               clamp(2rem, 4vw, 2.5rem) — same max as everyone else, but a
               bigger minimum, so it only stood out on narrow screens). */
            /* Was 24px — aligned to the page's biggest heading-to-body gap
               (32px, from .uo-stacked-left h2). */
            margin-bottom: 32px;
            color: var(--uo-text);
        }

        #uo-landing .uo-comparison-header p {
            text-align: center;
            max-width: 900px;
            margin: 0 auto 64px auto;
            font-size: 1.15rem;
            color: var(--uo-text);
            line-height: 1.6;
        }

        #uo-landing .uo-comparison-header p strong {
            font-weight: 700;
        }

        #uo-landing .uo-comparison-table {
            display: grid;
            grid-template-columns: 1fr 1fr;
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            overflow: hidden;
            background: #fff;
            max-width: 1100px;
            margin: 0 auto;
        }

        #uo-landing .uo-comp-header {
            font-size: 1.25rem;
            font-weight: 700;
            padding: 24px;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--uo-text);
        }

        #uo-landing .uo-comp-cell {
            padding: 24px;
            font-size: 1.15rem;
            line-height: 1.5;
            color: var(--uo-text);
            border-bottom: 1px solid #e0e0e0;
        }

        #uo-landing .uo-comp-bad {
            border-right: 1px solid #e0e0e0;
            background: #fff;
        }

        #uo-landing .uo-comp-good {
            background: #eaf6ea;
        }

        /* Remove bottom border for the last two cells */
        #uo-landing .uo-comparison-table > div:nth-last-child(1),
        #uo-landing .uo-comparison-table > div:nth-last-child(2) {
            border-bottom: none;
        }

        #uo-landing .uo-comparison-btn-wrapper {
            margin-top: 64px;
            text-align: center;
        }

        @media (max-width: 768px) {
            #uo-landing .uo-comp-header {
                font-size: 1.1rem;
                padding: 16px;
            }
            #uo-landing .uo-comp-cell {
                padding: 16px;
                font-size: 1.05rem;
            }
        }

        /* On narrow screens: same 2-column layout as desktop, just scaled down —
           smaller type and tighter padding so rows don't stretch the page. */
        @media (max-width: 640px) {
            #uo-landing .uo-comparison-header p {
                margin-bottom: 28px;
            }

            #uo-landing .uo-comparison-table {
                border-radius: 8px;
            }

            #uo-landing .uo-comp-header {
                /* Kept at/above the ~12-13px floor for legible UI text even
                   in this compact 2-column layout (was 0.72rem ≈ 11.5px). */
                font-size: 0.8rem;
                font-weight: 700;
                padding: 8px 6px;
                gap: 4px;
                line-height: 1.25;
            }

            #uo-landing .uo-comp-header .uo-sender-icon {
                font-size: 0.85em;
            }

            #uo-landing .uo-comp-cell {
                padding: 8px 8px;
                /* Was 0.74rem ≈ 11.8px — below comfortable reading size. */
                font-size: 0.82rem;
                line-height: 1.4;
            }
        }

        @media (max-width: 480px) {
            #uo-landing .uo-comparison-header p {
                font-size: 1.05rem;
            }
            #uo-landing .uo-comparison-btn-wrapper .uo-btn {
                width: 100%;
                justify-content: center;
            }
        }