{"id":1731,"date":"2026-10-14T02:19:49","date_gmt":"2026-10-14T02:19:49","guid":{"rendered":"https:\/\/richierich.com.my\/staging\/?page_id=1731"},"modified":"2026-10-16T04:15:14","modified_gmt":"2026-10-16T04:15:14","slug":"ai-automation","status":"publish","type":"page","link":"https:\/\/richierich.com.my\/staging\/ai-automation\/","title":{"rendered":"AI Automation"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1731\" class=\"elementor elementor-1731\">\n\t\t\t\t  <div class=\"elementor-element elementor-element-8738c43 e-con-full e-flex e-con e-parent\" data-id=\"8738c43\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8102d64 elementor-widget elementor-widget-html\" data-id=\"8102d64\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n\/* PAGE-LEVEL FIXES *\/\nbody,\n#page,\n#content,\n.site-content,\n.ast-separate-container {\n    background-color: var(--rr-bg, #050505) !important;\n}\n\n.site-content > .ast-container {\n    max-width: 100% !important;\n    width: 100% !important;\n    padding-left: 0 !important;\n    padding-right: 0 !important;\n    display: block !important;\n}\n\n#primary {\n    width: 100% !important;\n    max-width: 100% !important;\n    margin: 0 !important;\n    padding: 0 !important;\n}\n\n\/* HERO *\/\n.rr-pk-hero {\n    background-color: var(--rr-bg, #050505);\n    padding: 130px 5vw 90px;\n    min-height: 100vh;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.rr-pk-eyebrow {\n    font-family: 'Montserrat', sans-serif;\n    font-weight: 700;\n    font-size: 0.85rem;\n    letter-spacing: 0.25em;\n    text-transform: uppercase;\n    color: var(--rr-accent3, #ccff00);\n    margin: 0 0 1.5rem;\n}\n\n.rr-pk-title {\n    margin: 0 0 2rem;\n    font-family: 'Anton', sans-serif !important;\n    text-transform: uppercase;\n    font-size: clamp(3rem, min(9vw, 13vh), 10rem);\n    line-height: 0.95;\n    font-weight: 400;\n    color: var(--rr-text, #f0f0f0) !important;\n}\n\n.rr-pk-title .rr-line {\n    display: block;\n    overflow: hidden;\n}\n\n.rr-pk-title .rr-line > span {\n    display: inline-block;\n}\n\n.rr-pk-title .rr-accent {\n    color: var(--rr-accent3, #ccff00);\n}\n\n.rr-pk-sub {\n    font-family: 'Inter', sans-serif;\n    font-size: clamp(1rem, 1.6vw, 1.4rem);\n    font-weight: 300;\n    line-height: 1.6;\n    max-width: 640px;\n    color: var(--rr-text, #f0f0f0);\n    opacity: 0.75;\n    margin: 0 0 3rem;\n}\n\n.rr-pk-hero-btns {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 1rem;\n}\n\n.rr-pk-hbtn {\n    display: inline-block;\n    padding: 20px 44px;\n    border-radius: 100px;\n    border: 1px solid rgba(255, 255, 255, 0.3);\n    font-family: 'Montserrat', sans-serif;\n    font-weight: 700;\n    font-size: 0.95rem;\n    letter-spacing: 0.1em;\n    text-transform: uppercase;\n    text-decoration: none;\n    color: var(--rr-text, #f0f0f0);\n    transition: background-color 0.3s, color 0.3s, border-color 0.3s;\n}\n\n.rr-pk-hbtn:hover {\n    border-color: var(--rr-accent3, #ccff00);\n    color: var(--rr-accent3, #ccff00);\n}\n\n.rr-pk-hbtn.rr-primary {\n    background-color: var(--rr-accent3, #ccff00);\n    border-color: var(--rr-accent3, #ccff00);\n    color: var(--rr-bg, #050505);\n}\n\n.rr-pk-hbtn.rr-primary:hover {\n    background-color: transparent;\n    color: var(--rr-accent3, #ccff00);\n}\n\n.rr-pk-hero-inner {\n    will-change: filter, opacity;\n}\n\n\/* Lets the services section scroll OVER the pinned hero *\/\n.rr-gd-services {\n    position: relative;\n    z-index: 2;\n    background-color: transparent !important;\n}\n\n\/* Frosted cards (already styled in the services widget), so the blurred hero text doesn't show through them *\/\n.rr-gd-card {\n    -webkit-backdrop-filter: blur(18px);\n    backdrop-filter: blur(18px);\n}\n<\/style>\n\n<section class=\"rr-pk-hero\">\n  <div class=\"rr-pk-hero-inner\">\n    <p class=\"rr-pk-eyebrow\">AI Automation<\/p>\n\n    <h1 class=\"rr-pk-title\">\n        <span class=\"rr-line\"><span>Let AI handle<\/span><\/span>\n        <span class=\"rr-line\"><span>the busywork,<\/span><\/span>\n        <span class=\"rr-line\"><span class=\"rr-accent\">grow faster.<\/span><\/span>\n    <\/h1>\n\n    <p class=\"rr-pk-sub\">We build AI-powered automations that handle the repetitive work, from customer chats to lead follow-ups and reports, so your team can focus on growth.<\/p>\n\n    <div class=\"rr-pk-hero-btns\">\n        <a class=\"rr-pk-hbtn rr-primary rr-hoverable\" href=\"#services\">View services<\/a>\n        <a class=\"rr-pk-hbtn rr-hoverable\" href=\"\/staging\/contact-us\/\">Talk to us<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n(function () {\n    function rrInitPkHero() {\n        if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {\n            setTimeout(rrInitPkHero, 200);\n            return;\n        }\n        if (typeof window.rrBindHoverables === 'function') window.rrBindHoverables();\n        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n\n        gsap.from('.rr-pk-eyebrow', { opacity: 0, y: 20, duration: 0.8, ease: 'power3.out', delay: 0.2 });\n        gsap.from('.rr-pk-title .rr-line > span', {\n            yPercent: 110,\n            duration: 1.2,\n            ease: 'power4.out',\n            stagger: 0.12,\n            delay: 0.35\n        });\n        gsap.from('.rr-pk-sub', { opacity: 0, y: 30, duration: 1, ease: 'power3.out', delay: 1 });\n        gsap.from('.rr-pk-hero-btns', { opacity: 0, y: 30, duration: 1, ease: 'power3.out', delay: 1.2 });\n\n        \/\/ ---- Scroll effect: blur + dim, pinned behind the services section ----\n        var hero = document.querySelector('.rr-pk-hero');\n        var inner = document.querySelector('.rr-pk-hero-inner');\n        if (!hero || !inner) return;\n\n        \/\/ Phase 1: blur and dim as you start scrolling\n        gsap.fromTo(inner,\n            { filter: 'blur(0px)', opacity: 1 },\n            {\n                filter: 'blur(16px)',\n                opacity: 0.3,\n                ease: 'none',\n                scrollTrigger: {\n                    trigger: hero,\n                    start: 'top top',\n                    end: function () { return '+=' + (window.innerHeight * 0.7); },\n                    scrub: true,\n                    invalidateOnRefresh: true,\n                    \/\/ buttons stop being clickable once they're blurred out\n                    onUpdate: function (self) {\n                        inner.style.pointerEvents = self.progress > 0.3 ? 'none' : '';\n                    }\n                }\n            }\n        );\n\n        \/\/ Phase 2: stay pinned until the services section ends, then fade out\n        var services = document.querySelector('.rr-gd-services');\n        if (services) {\n            ScrollTrigger.create({\n                trigger: hero,\n                start: 'top top',\n                endTrigger: services,\n                end: 'bottom bottom',\n                pin: true,\n                pinSpacing: false\n            });\n\n            gsap.fromTo(inner,\n                { opacity: 0.3 },\n                {\n                    opacity: 0,\n                    ease: 'none',\n                    immediateRender: false,\n                    scrollTrigger: {\n                        trigger: services,\n                        start: 'bottom 150%',\n                        end: 'bottom 100%',\n                        scrub: true\n                    }\n                }\n            );\n        }\n    }\n    rrInitPkHero();\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-01fbc05 e-con-full e-flex e-con e-parent\" data-id=\"01fbc05\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-89a4d7c elementor-widget elementor-widget-html\" data-id=\"89a4d7c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--\nAI AUTOMATION PAGE \u2014 WIDGET 2 OF 6: WHAT WE AUTOMATE\n\nELEMENTOR SETUP:\n1. Section\/Container below the hero (full width, no background) ->\n   HTML widget -> paste everything below.\n2. ALL CONTENT IS PLACEHOLDER. Edit the six services (titles and\n   one-line descriptions) to match what Rich Media really offers.\n3. To add a service, copy one <div class=\"rr-gd-card\"> and renumber.\n4. The hero widget (richierich-54) stays pinned behind this section,\n   so keep this one directly under it. Its id is \"services\", which the\n   hero's \"View services\" button scrolls to.\n5. Uses GSAP\/ScrollTrigger from your sitewide footer WPCode snippet.\n-->\n\n<style>\n.rr-gd-services {\n    position: relative;\n    z-index: 2;\n    background-color: transparent;\n    padding: 8vh 5vw 12vh;\n}\n\n.rr-gd-head {\n    max-width: 1300px;\n    margin: 0 auto 7vh;\n}\n\n.rr-gd-label {\n    font-family: 'Montserrat', sans-serif;\n    font-weight: 700;\n    font-size: 0.85rem;\n    letter-spacing: 0.25em;\n    text-transform: uppercase;\n    color: var(--rr-accent3, #ccff00);\n    margin: 0 0 1rem;\n}\n\n.rr-gd-heading {\n    margin: 0;\n    font-family: 'Anton', sans-serif !important;\n    font-weight: 400;\n    text-transform: uppercase;\n    font-size: clamp(2.5rem, 6vw, 6rem);\n    line-height: 1;\n    color: var(--rr-text, #f0f0f0) !important;\n}\n\n.rr-gd-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 2vw;\n    max-width: 1300px;\n    margin: 0 auto;\n}\n\n.rr-gd-card {\n    padding: 2.4rem 2rem 2.6rem;\n    background: rgba(255, 255, 255, 0.04);\n    border: 1px solid rgba(255, 255, 255, 0.12);\n    border-radius: 18px;\n    -webkit-backdrop-filter: blur(18px);\n    backdrop-filter: blur(18px);\n    transition: transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;\n}\n\n.rr-gd-card:hover {\n    transform: translateY(-8px);\n    border-color: var(--rr-accent3, #ccff00);\n    background: rgba(255, 255, 255, 0.07);\n}\n\n.rr-gd-num {\n    font-family: 'Anton', sans-serif;\n    font-size: clamp(3rem, 5vw, 5rem);\n    line-height: 1;\n    color: transparent;\n    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.35);\n    margin-bottom: 1.2rem;\n    transition: -webkit-text-stroke-color 0.4s ease;\n}\n\n.rr-gd-card:hover .rr-gd-num {\n    -webkit-text-stroke-color: var(--rr-accent3, #ccff00);\n}\n\n.rr-gd-card h3 {\n    margin: 0 0 0.8rem;\n    font-family: 'Anton', sans-serif !important;\n    font-weight: 400;\n    text-transform: uppercase;\n    font-size: clamp(1.5rem, 2.2vw, 2.2rem);\n    line-height: 1.1;\n    color: var(--rr-text, #f0f0f0) !important;\n}\n\n.rr-gd-card p {\n    margin: 0;\n    font-family: 'Inter', sans-serif;\n    font-size: 0.98rem;\n    line-height: 1.6;\n    color: var(--rr-text, #f0f0f0);\n    opacity: 0.7;\n}\n\n@media (max-width: 900px) {\n    .rr-gd-grid { grid-template-columns: repeat(2, 1fr); gap: 3vh 4vw; }\n}\n\n@media (max-width: 600px) {\n    .rr-gd-grid { grid-template-columns: 1fr; }\n}\n<\/style>\n\n<section class=\"rr-gd-services\" id=\"services\">\n\n    <div class=\"rr-gd-head\">\n        <p class=\"rr-gd-label\">What we automate<\/p>\n        <h2 class=\"rr-gd-heading\">Less busywork,<br>more growth<\/h2>\n    <\/div>\n\n    <div class=\"rr-gd-grid\">\n\n        <div class=\"rr-gd-card\">\n            <div class=\"rr-gd-num\">01<\/div>\n            <h3>Workflow automation<\/h3>\n            <p>Connect your apps so repetitive tasks run on their own, without copying and pasting.<\/p>\n        <\/div>\n\n        <div class=\"rr-gd-card\">\n            <div class=\"rr-gd-num\">02<\/div>\n            <h3>AI chatbots<\/h3>\n            <p>Assistants on your website or WhatsApp that answer common questions around the clock.<\/p>\n        <\/div>\n\n        <div class=\"rr-gd-card\">\n            <div class=\"rr-gd-num\">03<\/div>\n            <h3>Lead capture and follow-up<\/h3>\n            <p>New enquiries are logged, acknowledged and followed up automatically, so none slip through.<\/p>\n        <\/div>\n\n        <div class=\"rr-gd-card\">\n            <div class=\"rr-gd-num\">04<\/div>\n            <h3>Document and data processing<\/h3>\n            <p>Pull the details out of forms, invoices and emails and send them where they belong.<\/p>\n        <\/div>\n\n        <div class=\"rr-gd-card\">\n            <div class=\"rr-gd-num\">05<\/div>\n            <h3>Content scheduling<\/h3>\n            <p>Plan, draft and schedule social posts and emails, with AI doing the heavy lifting.<\/p>\n        <\/div>\n\n        <div class=\"rr-gd-card\">\n            <div class=\"rr-gd-num\">06<\/div>\n            <h3>Reports and dashboards<\/h3>\n            <p>Numbers from your tools gathered into clear reports that update themselves.<\/p>\n        <\/div>\n\n    <\/div>\n<\/section>\n\n<script>\n(function () {\n    function rrInitGdServices() {\n        if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {\n            setTimeout(rrInitGdServices, 200);\n            return;\n        }\n        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n\n        gsap.from('.rr-gd-head', {\n            y: 40, opacity: 0, duration: 1, ease: 'power3.out',\n            scrollTrigger: { trigger: '.rr-gd-head', start: 'top 85%' }\n        });\n\n        \/\/ clearProps hands transform control back to CSS afterwards,\n        \/\/ so the hover lift keeps working\n        gsap.from('.rr-gd-card', {\n            y: 70, opacity: 0, duration: 0.9, ease: 'power3.out', stagger: 0.1,\n            clearProps: 'transform,opacity',\n            scrollTrigger: { trigger: '.rr-gd-grid', start: 'top 85%' }\n        });\n    }\n    rrInitGdServices();\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c24d4f5 e-con-full e-flex e-con e-parent\" data-id=\"c24d4f5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9cc4dbc elementor-widget elementor-widget-html\" data-id=\"9cc4dbc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--\nAI AUTOMATION PAGE \u2014 WIDGET 3 OF 6: CAPABILITIES STRIP\n\nELEMENTOR SETUP:\n1. On the Portfolio page, add a Section\/Container (full width, Overflow: Visible).\n2. Add an \"HTML\" widget and paste everything below.\n3. Edit the words in the two rows (keep each row's repeated copies\n   so the line is always wider than the screen).\n4. This is a mid-page section, so it has no extra top padding for the header.\n5. Uses GSAP\/ScrollTrigger from your sitewide footer WPCode snippet.\n\nEFFECT: two giant text rows slide in opposite directions as you scroll\npast the section (one solid, one outlined).\n-->\n\n<style>\n.rr-pf-hero {\n    background-color: var(--rr-bg, #050505);\n    padding: 10vh 0 12vh;\n    overflow: hidden;\n}\n\n.rr-pf-hero-row {\n    white-space: nowrap;\n    font-family: 'Anton', sans-serif;\n    text-transform: uppercase;\n    font-size: clamp(3.5rem, 10vw, 11rem);\n    line-height: 1;\n    color: var(--rr-text, #f0f0f0);\n    will-change: transform;\n}\n\n.rr-pf-hero-row.rr-outline {\n    color: transparent;\n    -webkit-text-stroke: 2px var(--rr-text, #f0f0f0);\n}\n\n\/* Small label above the moving rows *\/\n.rr-pf-hero-label {\n    margin: 0 0 3vh;\n    padding: 0 5vw;\n    font-family: 'Montserrat', sans-serif;\n    font-weight: 700;\n    font-size: 0.85rem;\n    letter-spacing: 0.25em;\n    text-transform: uppercase;\n    color: var(--rr-accent3, #ccff00);\n}\n\n.rr-pf-hero-row span {\n    display: inline-block;\n    padding-right: 3vw;\n}\n<\/style>\n\n<section class=\"rr-pf-hero\">\n    <p class=\"rr-pf-hero-label\">What we can automate<\/p>\n    <div class=\"rr-pf-hero-row\" data-dir=\"left\">\n        <span>Chatbots &middot; Workflows &middot; Follow-ups &middot;<\/span><span>Chatbots &middot; Workflows &middot; Follow-ups &middot;<\/span><span>Chatbots &middot; Workflows &middot; Follow-ups &middot;<\/span><span>Chatbots &middot; Workflows &middot; Follow-ups &middot;<\/span>\n    <\/div>\n    <div class=\"rr-pf-hero-row rr-outline\" data-dir=\"right\">\n        <span>Reports &middot; Data entry &middot; Integrations &middot;<\/span><span>Reports &middot; Data entry &middot; Integrations &middot;<\/span><span>Reports &middot; Data entry &middot; Integrations &middot;<\/span><span>Reports &middot; Data entry &middot; Integrations &middot;<\/span>\n    <\/div>\n<\/section>\n\n<script>\n(function () {\n    function rrInitPfHero() {\n        if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {\n            setTimeout(rrInitPfHero, 200);\n            return;\n        }\n        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n\n        var section = document.querySelector('.rr-pf-hero');\n        if (!section) return;\n\n        section.querySelectorAll('.rr-pf-hero-row').forEach(function (row) {\n            var goLeft = row.getAttribute('data-dir') === 'left';\n            gsap.fromTo(row,\n                { xPercent: goLeft ? 0 : -35 },\n                {\n                    xPercent: goLeft ? -35 : 0,\n                    ease: 'none',\n                    scrollTrigger: {\n                        trigger: section,\n                        start: 'top bottom',\n                        end: 'bottom top',\n                        scrub: 1\n                    }\n                }\n            );\n        });\n    }\n    rrInitPfHero();\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-515c8de e-con-full e-flex e-con e-parent\" data-id=\"515c8de\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-24997ee elementor-widget elementor-widget-html\" data-id=\"24997ee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--\nAI AUTOMATION PAGE \u2014 WIDGET 4 OF 6: INCLUDED + PROCESS\n\nELEMENTOR SETUP:\n1. Section\/Container below the capabilities strip (full width, no\n   background) -> HTML widget -> paste everything below.\n2. ALL CONTENT IS PLACEHOLDER. Edit the \"included\" items and the four\n   process steps to match how Rich Media actually works.\n3. To add a step, copy one <div class=\"rr-pk-step\"> and renumber.\n4. Uses GSAP\/ScrollTrigger from your sitewide footer WPCode snippet.\n-->\n\n<style>\n.rr-pk-process {\n    background-color: var(--rr-bg, #050505);\n    padding: 10vh 5vw 12vh;\n}\n\n.rr-pk-wrap {\n    max-width: 1300px;\n    margin: 0 auto;\n}\n\n.rr-pk-label {\n    font-family: 'Montserrat', sans-serif;\n    font-weight: 700;\n    font-size: 0.85rem;\n    letter-spacing: 0.25em;\n    text-transform: uppercase;\n    color: var(--rr-accent3, #ccff00);\n    margin: 0 0 1rem;\n}\n\n.rr-pk-h2 {\n    margin: 0 0 6vh;\n    font-family: 'Anton', sans-serif !important;\n    font-weight: 400;\n    text-transform: uppercase;\n    font-size: clamp(2.5rem, 6vw, 6rem);\n    line-height: 1;\n    color: var(--rr-text, #f0f0f0) !important;\n}\n\n\/* Included in every project *\/\n.rr-pk-included {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 2vw;\n    margin-bottom: 14vh;\n}\n\n.rr-pk-inc {\n    padding-top: 1.5rem;\n    border-top: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.rr-pk-inc h3 {\n    margin: 0 0 0.6rem;\n    font-family: 'Montserrat', sans-serif !important;\n    font-weight: 700;\n    font-size: 1.1rem;\n    color: var(--rr-text, #f0f0f0) !important;\n}\n\n.rr-pk-inc p {\n    margin: 0;\n    font-family: 'Inter', sans-serif;\n    font-size: 0.95rem;\n    line-height: 1.55;\n    color: var(--rr-text, #f0f0f0);\n    opacity: 0.65;\n}\n\n\/* Process steps *\/\n.rr-pk-step {\n    display: grid;\n    grid-template-columns: minmax(120px, 22%) 1fr;\n    gap: 3vw;\n    align-items: center;\n    padding: 4vh 0;\n    border-top: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.rr-pk-step:last-child {\n    border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.rr-pk-num {\n    font-family: 'Anton', sans-serif;\n    font-size: clamp(4.5rem, 11vw, 11rem);\n    line-height: 1;\n    color: transparent;\n    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.35);\n    transition: -webkit-text-stroke-color 0.4s ease;\n}\n\n.rr-pk-step:hover .rr-pk-num {\n    -webkit-text-stroke-color: var(--rr-accent3, #ccff00);\n}\n\n.rr-pk-step h3 {\n    margin: 0 0 0.8rem;\n    font-family: 'Anton', sans-serif !important;\n    font-weight: 400;\n    text-transform: uppercase;\n    font-size: clamp(1.8rem, 3.4vw, 3.4rem);\n    color: var(--rr-text, #f0f0f0) !important;\n}\n\n.rr-pk-step p {\n    margin: 0;\n    max-width: 560px;\n    font-family: 'Inter', sans-serif;\n    font-size: clamp(0.95rem, 1.2vw, 1.15rem);\n    line-height: 1.6;\n    color: var(--rr-text, #f0f0f0);\n    opacity: 0.7;\n}\n\n@media (max-width: 900px) {\n    .rr-pk-included { grid-template-columns: repeat(2, 1fr); gap: 5vh 4vw; }\n}\n\n@media (max-width: 600px) {\n    .rr-pk-included { grid-template-columns: 1fr; }\n    .rr-pk-step { grid-template-columns: 1fr; gap: 1rem; }\n}\n<\/style>\n\n<section class=\"rr-pk-process\">\n    <div class=\"rr-pk-wrap\">\n\n        <p class=\"rr-pk-label\">Every project includes<\/p>\n        <h2 class=\"rr-pk-h2\">What you always get<\/h2>\n\n        <div class=\"rr-pk-included\">\n            <div class=\"rr-pk-inc\">\n                <h3>Process mapping<\/h3>\n                <p>We study how your work happens today, so we automate the right things.<\/p>\n            <\/div>\n            <div class=\"rr-pk-inc\">\n                <h3>Humans in the loop<\/h3>\n                <p>Important decisions stay with your team, with AI handling the routine parts.<\/p>\n            <\/div>\n            <div class=\"rr-pk-inc\">\n                <h3>Tested before launch<\/h3>\n                <p>We try every automation with real scenarios before it goes live.<\/p>\n            <\/div>\n            <div class=\"rr-pk-inc\">\n                <h3>Training and handover<\/h3>\n                <p>Your team learns how it works, with simple guides to keep things running.<\/p>\n            <\/div>\n        <\/div>\n\n        <p class=\"rr-pk-label\">How it works<\/p>\n        <h2 class=\"rr-pk-h2\">From busywork to autopilot<\/h2>\n\n        <div class=\"rr-pk-steps\">\n            <div class=\"rr-pk-step\">\n                <div class=\"rr-pk-num\">01<\/div>\n                <div>\n                    <h3>Discover<\/h3>\n                    <p>We map your current process and find the tasks that eat the most time.<\/p>\n                <\/div>\n            <\/div>\n            <div class=\"rr-pk-step\">\n                <div class=\"rr-pk-num\">02<\/div>\n                <div>\n                    <h3>Design<\/h3>\n                    <p>We plan the workflow and choose tools that fit the systems you already use.<\/p>\n                <\/div>\n            <\/div>\n            <div class=\"rr-pk-step\">\n                <div class=\"rr-pk-num\">03<\/div>\n                <div>\n                    <h3>Build<\/h3>\n                    <p>We build, connect and test the automation until it behaves exactly as planned.<\/p>\n                <\/div>\n            <\/div>\n            <div class=\"rr-pk-step\">\n                <div class=\"rr-pk-num\">04<\/div>\n                <div>\n                    <h3>Support<\/h3>\n                    <p>We train your team, monitor how it runs and keep improving it over time.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/section>\n\n<script>\n(function () {\n    function rrInitPkProcess() {\n        if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {\n            setTimeout(rrInitPkProcess, 200);\n            return;\n        }\n        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n\n        gsap.from('.rr-pk-inc', {\n            y: 50, opacity: 0, duration: 0.9, ease: 'power3.out', stagger: 0.12,\n            scrollTrigger: { trigger: '.rr-pk-included', start: 'top 85%' }\n        });\n\n        gsap.utils.toArray('.rr-pk-step').forEach(function (step) {\n            gsap.from(step, {\n                y: 60, opacity: 0, duration: 1, ease: 'power3.out',\n                scrollTrigger: { trigger: step, start: 'top 88%' }\n            });\n        });\n    }\n    rrInitPkProcess();\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9dcc711 e-con-full elementor-hidden-desktop elementor-hidden-laptop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"9dcc711\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-56892bd elementor-widget elementor-widget-html\" data-id=\"56892bd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--\nAI AUTOMATION PAGE \u2014 WIDGET 5 OF 6: PACKAGES\n\nELEMENTOR SETUP:\n1. Section\/Container below the process section (full width, no background) ->\n   HTML widget -> paste everything below.\n2. ALL CONTENT IS PLACEHOLDER. Replace plan names, taglines, prices\n   (\"RM X,XXX\") and every feature line with your real offering.\n3. To add a feature, copy one <li>. To change which card is highlighted,\n   move the class \"rr-featured\" and the \"Most popular\" badge.\n4. Button links go to \/contact-us\/ \u2014 change if needed.\n5. Uses GSAP\/ScrollTrigger from your sitewide footer WPCode snippet.\n-->\n\n<style>\n.rr-pk-pricing {\n    background-color: var(--rr-bg, #050505);\n    padding: 8vh 5vw 12vh;\n}\n\n.rr-pk-pricing-head {\n    text-align: center;\n    margin-bottom: 7vh;\n}\n\n.rr-pk-label {\n    font-family: 'Montserrat', sans-serif;\n    font-weight: 700;\n    font-size: 0.85rem;\n    letter-spacing: 0.25em;\n    text-transform: uppercase;\n    color: var(--rr-accent3, #ccff00);\n    margin: 0 0 1rem;\n}\n\n.rr-pk-heading {\n    margin: 0;\n    font-family: 'Anton', sans-serif !important;\n    font-weight: 400;\n    text-transform: uppercase;\n    font-size: clamp(2.5rem, 6vw, 6rem);\n    line-height: 1;\n    color: var(--rr-text, #f0f0f0) !important;\n}\n\n.rr-pk-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 2vw;\n    align-items: stretch;\n    max-width: 1300px;\n    margin: 0 auto;\n}\n\n.rr-pk-card {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    padding: 2.8rem 2.2rem;\n    background: rgba(255, 255, 255, 0.04);\n    border: 1px solid rgba(255, 255, 255, 0.12);\n    border-radius: 18px;\n    transition: transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;\n}\n\n.rr-pk-card:hover {\n    transform: translateY(-8px);\n    border-color: rgba(255, 255, 255, 0.35);\n    background: rgba(255, 255, 255, 0.07);\n}\n\n.rr-pk-card.rr-featured {\n    top: -16px;\n    border-color: var(--rr-accent3, #ccff00);\n    background: rgba(204, 255, 0, 0.06);\n}\n\n.rr-pk-badge {\n    position: absolute;\n    top: -14px;\n    left: 50%;\n    transform: translateX(-50%);\n    padding: 6px 18px;\n    border-radius: 100px;\n    background: var(--rr-accent3, #ccff00);\n    color: var(--rr-bg, #050505);\n    font-family: 'Montserrat', sans-serif;\n    font-weight: 800;\n    font-size: 0.7rem;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n    white-space: nowrap;\n}\n\n.rr-pk-tier {\n    margin: 0 0 0.5rem;\n    font-family: 'Anton', sans-serif !important;\n    font-weight: 400;\n    text-transform: uppercase;\n    font-size: clamp(1.8rem, 2.6vw, 2.6rem);\n    color: var(--rr-text, #f0f0f0) !important;\n}\n\n.rr-pk-tagline {\n    margin: 0 0 1.8rem;\n    font-family: 'Inter', sans-serif;\n    font-size: 0.95rem;\n    line-height: 1.5;\n    color: var(--rr-text, #f0f0f0);\n    opacity: 0.65;\n    min-height: 2.9em;\n}\n\n.rr-pk-price {\n    margin: 0;\n    font-family: 'Anton', sans-serif !important;\n    font-weight: 400;\n    font-size: clamp(2.4rem, 3.6vw, 3.6rem);\n    line-height: 1;\n    color: var(--rr-text, #f0f0f0) !important;\n}\n\n.rr-pk-price-note {\n    margin: 0.5rem 0 1.8rem;\n    font-family: 'Inter', sans-serif;\n    font-size: 0.8rem;\n    letter-spacing: 0.05em;\n    color: var(--rr-text, #f0f0f0);\n    opacity: 0.5;\n}\n\n.rr-pk-list {\n    list-style: none;\n    margin: 0 0 2.2rem;\n    padding: 1.8rem 0 0;\n    border-top: 1px solid rgba(255, 255, 255, 0.12);\n    flex: 1 1 auto;\n}\n\n.rr-pk-list li {\n    position: relative;\n    padding: 0 0 0.9rem 1.8rem;\n    margin: 0;\n    font-family: 'Inter', sans-serif;\n    font-size: 0.95rem;\n    line-height: 1.45;\n    color: var(--rr-text, #f0f0f0);\n}\n\n.rr-pk-list li::before {\n    content: '\\2713';\n    position: absolute;\n    left: 0;\n    top: 0;\n    color: var(--rr-accent3, #ccff00);\n    font-weight: 700;\n}\n\n.rr-pk-btn {\n    display: block;\n    text-align: center;\n    padding: 18px 24px;\n    border-radius: 100px;\n    border: 1px solid rgba(255, 255, 255, 0.3);\n    font-family: 'Montserrat', sans-serif;\n    font-weight: 700;\n    font-size: 0.9rem;\n    letter-spacing: 0.1em;\n    text-transform: uppercase;\n    text-decoration: none;\n    color: var(--rr-text, #f0f0f0);\n    transition: background-color 0.3s, color 0.3s, border-color 0.3s;\n}\n\n.rr-pk-btn:hover {\n    background-color: var(--rr-accent3, #ccff00);\n    border-color: var(--rr-accent3, #ccff00);\n    color: var(--rr-bg, #050505);\n}\n\n.rr-pk-featured .rr-pk-btn,\n.rr-pk-card.rr-featured .rr-pk-btn {\n    background-color: var(--rr-accent3, #ccff00);\n    border-color: var(--rr-accent3, #ccff00);\n    color: var(--rr-bg, #050505);\n}\n\n.rr-pk-card.rr-featured .rr-pk-btn:hover {\n    background-color: transparent;\n    color: var(--rr-accent3, #ccff00);\n}\n\n.rr-pk-footnote {\n    text-align: center;\n    margin: 6vh auto 0;\n    max-width: 700px;\n    font-family: 'Inter', sans-serif;\n    font-size: 0.9rem;\n    line-height: 1.6;\n    color: var(--rr-text, #f0f0f0);\n    opacity: 0.6;\n}\n\n.rr-pk-footnote a {\n    color: var(--rr-accent3, #ccff00);\n    text-decoration: underline;\n}\n\n@media (max-width: 900px) {\n    .rr-pk-grid {\n        grid-template-columns: 1fr;\n        gap: 4vh;\n        max-width: 520px;\n    }\n    .rr-pk-card.rr-featured { top: 0; }\n    .rr-pk-tagline { min-height: 0; }\n}\n<\/style>\n\n<section class=\"rr-pk-pricing\" id=\"plans\">\n\n    <div class=\"rr-pk-pricing-head\">\n        <p class=\"rr-pk-label\">Automation packages<\/p>\n        <h2 class=\"rr-pk-heading\">Pick your plan<\/h2>\n    <\/div>\n\n    <div class=\"rr-pk-grid\">\n\n        <div class=\"rr-pk-card\">\n            <h3 class=\"rr-pk-tier\">Starter<\/h3>\n            <p class=\"rr-pk-tagline\">For businesses automating their first repetitive task.<\/p>\n            <p class=\"rr-pk-price\">RM X,XXX<\/p>\n            <p class=\"rr-pk-price-note\">Setup fee<\/p>\n            <ul class=\"rr-pk-list\">\n                <li>1 automated workflow<\/li>\n                <li>App integration setup<\/li>\n                <li>Testing and handover<\/li>\n                <li>Short team training<\/li>\n            <\/ul>\n            <a class=\"rr-pk-btn rr-hoverable\" href=\"\/contact-us\/\">Get started<\/a>\n        <\/div>\n\n        <div class=\"rr-pk-card rr-featured\">\n            <span class=\"rr-pk-badge\">Most popular<\/span>\n            <h3 class=\"rr-pk-tier\">Growth<\/h3>\n            <p class=\"rr-pk-tagline\">For growing businesses ready to automate key parts of their work.<\/p>\n            <p class=\"rr-pk-price\">RM X,XXX<\/p>\n            <p class=\"rr-pk-price-note\">Setup fee<\/p>\n            <ul class=\"rr-pk-list\">\n                <li>Up to 3 automated workflows<\/li>\n                <li>AI chatbot for your website or WhatsApp<\/li>\n                <li>CRM or spreadsheet integration<\/li>\n                <li>Team training<\/li>\n                <li>30 days of support<\/li>\n            <\/ul>\n            <a class=\"rr-pk-btn rr-hoverable\" href=\"\/contact-us\/\">Get started<\/a>\n        <\/div>\n\n        <div class=\"rr-pk-card\">\n            <h3 class=\"rr-pk-tier\">Scale<\/h3>\n            <p class=\"rr-pk-tagline\">For businesses that want automation running across the company.<\/p>\n            <p class=\"rr-pk-price\">RM X,XXX<\/p>\n            <p class=\"rr-pk-price-note\">Setup fee<\/p>\n            <ul class=\"rr-pk-list\">\n                <li>Custom multi-step automations<\/li>\n                <li>AI assistant trained on your content<\/li>\n                <li>Advanced integrations<\/li>\n                <li>Reporting dashboard<\/li>\n                <li>Ongoing support plan<\/li>\n            <\/ul>\n            <a class=\"rr-pk-btn rr-hoverable\" href=\"\/contact-us\/\">Get started<\/a>\n        <\/div>\n\n    <\/div>\n\n    <p class=\"rr-pk-footnote\">Subscriptions for the tools involved are billed by their providers and aren't included in these prices. Need something different? <a href=\"\/contact-us\/\">Tell us what you have in mind<\/a> and we'll quote a custom plan.<\/p>\n\n<\/section>\n\n<script>\n(function () {\n    function rrInitPkPricing() {\n        if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {\n            setTimeout(rrInitPkPricing, 200);\n            return;\n        }\n        if (typeof window.rrBindHoverables === 'function') window.rrBindHoverables();\n        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n\n        gsap.from('.rr-pk-pricing-head', {\n            y: 40, opacity: 0, duration: 1, ease: 'power3.out',\n            scrollTrigger: { trigger: '.rr-pk-pricing-head', start: 'top 85%' }\n        });\n\n        \/\/ clearProps hands transform control back to CSS afterwards,\n        \/\/ so the hover lift keeps working\n        gsap.from('.rr-pk-card', {\n            y: 80, opacity: 0, duration: 1, ease: 'power3.out', stagger: 0.15,\n            clearProps: 'transform,opacity',\n            scrollTrigger: { trigger: '.rr-pk-grid', start: 'top 82%' }\n        });\n    }\n    rrInitPkPricing();\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-60caadd e-con-full e-flex e-con e-parent\" data-id=\"60caadd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-668bfd7 elementor-widget elementor-widget-html\" data-id=\"668bfd7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--\nAI AUTOMATION PAGE \u2014 WIDGET 6 OF 6: FAQ\n\nELEMENTOR SETUP:\n1. Section\/Container below the process section (full width, no\n   background) -> HTML widget -> paste everything below.\n2. ALL ANSWERS ARE PLACEHOLDER. Replace with your real answers.\n3. To add a question, copy one whole <details>...<\/details> block.\n4. No JavaScript needed. The name=\"rr-pk-faq\" attribute makes opening\n   one question close the others in current browsers; in older ones the\n   questions simply open independently, which is harmless.\n5. Finish the page with your \"Let's work together\" widget\n   (richierich-17-portfolio-cta-widget) right below this one.\n-->\n\n<style>\n.rr-pk-faq {\n    background-color: var(--rr-bg, #050505);\n    padding: 8vh 5vw 12vh;\n}\n\n.rr-pk-faq-wrap {\n    max-width: 1000px;\n    margin: 0 auto;\n}\n\n.rr-pk-faq-label {\n    font-family: 'Montserrat', sans-serif;\n    font-weight: 700;\n    font-size: 0.85rem;\n    letter-spacing: 0.25em;\n    text-transform: uppercase;\n    color: var(--rr-accent3, #ccff00);\n    margin: 0 0 1rem;\n}\n\n.rr-pk-faq-h2 {\n    margin: 0 0 6vh;\n    font-family: 'Anton', sans-serif !important;\n    font-weight: 400;\n    text-transform: uppercase;\n    font-size: clamp(2.5rem, 6vw, 6rem);\n    line-height: 1;\n    color: var(--rr-text, #f0f0f0) !important;\n}\n\n.rr-pk-faq details {\n    border-top: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.rr-pk-faq details:last-of-type {\n    border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.rr-pk-faq summary {\n    position: relative;\n    list-style: none;\n    cursor: pointer;\n    padding: 2rem 3rem 2rem 0;\n    font-family: 'Montserrat', sans-serif;\n    font-weight: 600;\n    font-size: clamp(1.05rem, 1.7vw, 1.5rem);\n    line-height: 1.35;\n    color: var(--rr-text, #f0f0f0);\n    transition: color 0.3s;\n}\n\n.rr-pk-faq summary::-webkit-details-marker { display: none; }\n\n.rr-pk-faq summary::after {\n    content: '+';\n    position: absolute;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 2rem;\n    font-weight: 300;\n    color: var(--rr-accent3, #ccff00);\n    transition: transform 0.3s ease;\n}\n\n.rr-pk-faq details[open] summary::after {\n    transform: translateY(-50%) rotate(45deg);\n}\n\n.rr-pk-faq summary:hover {\n    color: var(--rr-accent3, #ccff00);\n}\n\n.rr-pk-faq details p {\n    margin: 0;\n    padding: 0 3rem 2rem 0;\n    max-width: 760px;\n    font-family: 'Inter', sans-serif;\n    font-size: 1rem;\n    line-height: 1.7;\n    color: var(--rr-text, #f0f0f0);\n    opacity: 0.7;\n}\n<\/style>\n\n<section class=\"rr-pk-faq\">\n    <div class=\"rr-pk-faq-wrap\">\n\n        <p class=\"rr-pk-faq-label\">FAQ<\/p>\n        <h2 class=\"rr-pk-faq-h2\">Questions, answered<\/h2>\n\n        <details name=\"rr-pk-faq\">\n            <summary>What can be automated in my business?<\/summary>\n            <p>Repetitive tasks such as answering common questions, capturing and following up leads, entering data, sending reminders and producing reports. We start by mapping your process and recommend what's worth automating.<\/p>\n        <\/details>\n\n        <details name=\"rr-pk-faq\">\n            <summary>Will automation replace my staff?<\/summary>\n            <p>The aim is to remove repetitive work so your team can focus on work that needs people. We design automations with a human in the loop for anything important.<\/p>\n        <\/details>\n\n        <details name=\"rr-pk-faq\">\n            <summary>Is my data safe?<\/summary>\n            <p>We use trusted tools, limit access to what's needed, and explain what data goes where before we start. If you have sensitive data or specific requirements, we'll go through them together first.<\/p>\n        <\/details>\n\n        <details name=\"rr-pk-faq\">\n            <summary>Which tools do you use?<\/summary>\n            <p>We pick tools that fit your existing setup, such as your CRM, spreadsheets, email and messaging apps, rather than forcing you onto something new.<\/p>\n        <\/details>\n\n        <details name=\"rr-pk-faq\">\n            <summary>What if something stops working?<\/summary>\n            <p>We test thoroughly before launch, and we can monitor and maintain your automations under a support plan so issues get fixed quickly.<\/p>\n        <\/details>\n\n        <details name=\"rr-pk-faq\">\n            <summary>How long does it take to set up?<\/summary>\n            <p>A simple automation can be live within days to a couple of weeks. More complex, multi-step setups take longer, and we'll confirm a timeline after mapping your process.<\/p>\n        <\/details>\n\n    <\/div>\n<\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3e33905 e-con-full elementor-hidden-desktop elementor-hidden-laptop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"3e33905\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-96f52b7 elementor-widget elementor-widget-html\" data-id=\"96f52b7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n.rr-pf-logos2 {\n    background-color: var(--rr-bg, #050505);\n    padding: 12vh 4vw;\n    overflow: hidden;\n}\n\n.rr-pf-logos2-row {\n    display: flex;\n    align-items: center;\n    gap: 2vw;\n    will-change: transform;\n}\n\n.rr-pf-logos2-row + .rr-pf-logos2-row {\n    margin-top: 6vh;\n}\n\n.rr-pf-logo2 {\n    flex: 1 1 0;\n    min-width: 0;\n    height: clamp(50px, 6vw, 90px);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.rr-pf-logo2 img {\n    max-width: 100%;\n    max-height: 100%;\n    width: auto;\n    height: auto;\n    object-fit: contain;\n    filter: grayscale(1) brightness(1.15);\n    opacity: 0.65;\n    transition: filter 0.4s ease, opacity 0.4s ease;\n}\n\n.rr-pf-logo2:hover img {\n    filter: grayscale(0) brightness(1);\n    opacity: 1;\n}\n\n@media (max-width: 768px) {\n    .rr-pf-logos2-row {\n        flex-wrap: wrap;\n        justify-content: center;\n        gap: 4vw;\n    }\n    .rr-pf-logo2 {\n        flex: 0 0 28%;\n        height: 48px;\n    }\n}\n<\/style>\n\n<section class=\"rr-pf-logos2\">\n\n    <div class=\"rr-pf-logos2-row\" data-dir=\"left\">\n        <div class=\"rr-pf-logo2\"><img decoding=\"async\" src=\"https:\/\/richierich.com.my\/staging\/wp-content\/uploads\/2026\/08\/finamics-01.png\" alt=\"Finamics\"><\/div>\n        <div class=\"rr-pf-logo2\"><img decoding=\"async\" src=\"https:\/\/richierich.com.my\/staging\/wp-content\/uploads\/2026\/08\/euda-01.png\" alt=\"EUDA\"><\/div>\n        <div class=\"rr-pf-logo2\"><img decoding=\"async\" src=\"https:\/\/richierich.com.my\/staging\/wp-content\/uploads\/2026\/08\/honda-01.png\" alt=\"Honda\"><\/div>\n        <div class=\"rr-pf-logo2\"><img decoding=\"async\" src=\"https:\/\/richierich.com.my\/staging\/wp-content\/uploads\/2026\/08\/acmar-01.png\" alt=\"acmar\"><\/div>\n        <div class=\"rr-pf-logo2\"><img decoding=\"async\" src=\"https:\/\/richierich.com.my\/staging\/wp-content\/uploads\/2026\/08\/mesuma-01.png\" alt=\"mesuma\"><\/div>\n        <div class=\"rr-pf-logo2\"><img decoding=\"async\" src=\"https:\/\/richierich.com.my\/staging\/wp-content\/uploads\/2026\/08\/perodua-01.png\" alt=\"perodua\"><\/div>\n    <\/div>\n\n    <div class=\"rr-pf-logos2-row\" data-dir=\"right\">\n        <div class=\"rr-pf-logo2\"><img decoding=\"async\" src=\"https:\/\/richierich.com.my\/staging\/wp-content\/uploads\/2026\/08\/iw-global-01.png\" alt=\"IW global\"><\/div>\n        <div class=\"rr-pf-logo2\"><img decoding=\"async\" src=\"https:\/\/richierich.com.my\/staging\/wp-content\/uploads\/2026\/10\/velabay-01.png\" alt=\"velabay\"><\/div>\n        <div class=\"rr-pf-logo2\"><img decoding=\"async\" src=\"https:\/\/richierich.com.my\/staging\/wp-content\/uploads\/2026\/08\/odyssey-01.png\" alt=\"odyssey\"><\/div>\n        <div class=\"rr-pf-logo2\"><img decoding=\"async\" src=\"https:\/\/richierich.com.my\/staging\/wp-content\/uploads\/2026\/08\/smart-01.png\" alt=\"smart\"><\/div>\n        <div class=\"rr-pf-logo2\"><img decoding=\"async\" src=\"https:\/\/richierich.com.my\/staging\/wp-content\/uploads\/2026\/08\/tcm-01.png\" alt=\"tcm\"><\/div>\n        <div class=\"rr-pf-logo2\"><img decoding=\"async\" src=\"https:\/\/richierich.com.my\/staging\/wp-content\/uploads\/2026\/08\/boules-01.png\" alt=\"boules\"><\/div>\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    function rrInitPfLogos2() {\n        if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {\n            setTimeout(rrInitPfLogos2, 200);\n            return;\n        }\n\n        var section = document.querySelector('.rr-pf-logos2');\n        if (!section) return;\n\n        \/\/ Only animate on desktop\/tablet and when motion is allowed\n        var mm = gsap.matchMedia();\n        mm.add('(min-width: 769px) and (prefers-reduced-motion: no-preference)', function () {\n            section.querySelectorAll('.rr-pf-logos2-row').forEach(function (row) {\n                var goLeft = row.getAttribute('data-dir') === 'left';\n                gsap.fromTo(row,\n                    { xPercent: goLeft ? 7 : -7 },\n                    {\n                        xPercent: goLeft ? -7 : 7,\n                        ease: 'none',\n                        scrollTrigger: {\n                            trigger: section,\n                            start: 'top bottom',\n                            end: 'bottom top',\n                            scrub: 1\n                        }\n                    }\n                );\n            });\n        });\n    }\n    rrInitPfLogos2();\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-78fc280 e-con-full e-flex e-con e-parent\" data-id=\"78fc280\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1d67ff4 elementor-widget elementor-widget-html\" data-id=\"1d67ff4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n.rr-pf-cta {\n    background-color: var(--rr-bg, #050505);\n    padding: 12vh 0;\n    overflow: hidden;\n    text-align: center;\n}\n\n.rr-pf-cta-band {\n    white-space: nowrap;\n    font-family: 'Anton', sans-serif;\n    text-transform: uppercase;\n    font-size: clamp(3.5rem, 11vw, 12rem);\n    line-height: 1.05;\n    color: var(--rr-text, #f0f0f0);\n    will-change: transform;\n}\n\n.rr-pf-cta-band span {\n    display: inline-block;\n    padding-right: 4vw;\n}\n\n.rr-pf-cta-band span:nth-child(even) {\n    color: transparent;\n    -webkit-text-stroke: 2px var(--rr-text, #f0f0f0);\n}\n\n.rr-pf-cta-btn {\n    display: inline-block;\n    margin-top: 6vh;\n    padding: 28px 64px;\n    border: 1px solid rgba(255, 255, 255, 0.3);\n    border-radius: 100px;\n    font-family: 'Montserrat', sans-serif;\n    font-weight: 700;\n    font-size: 1.2rem;\n    letter-spacing: 0.1em;\n    text-decoration: none;\n    color: var(--rr-text, #f0f0f0);\n    position: relative;\n    overflow: hidden;\n    isolation: isolate;\n    transition: color 0.3s, border-color 0.3s;\n}\n\n.rr-pf-cta-btn::before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 100%;\n    width: 100%;\n    height: 100%;\n    background-color: var(--rr-accent3, #ccff00);\n    transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);\n    z-index: -1;\n    border-radius: 50% 50% 0 0;\n}\n\n.rr-pf-cta-btn:hover {\n    color: var(--rr-bg, #050505);\n    border-color: var(--rr-accent3, #ccff00);\n}\n\n.rr-pf-cta-btn:hover::before {\n    transform: translateY(-100%);\n    border-radius: 0;\n}\n<\/style>\n\n<section class=\"rr-pf-cta\">\n    <div class=\"rr-pf-cta-band\">\n        <span>Let's work together<\/span><span>Let's work together<\/span><span>Let's work together<\/span><span>Let's work together<\/span>\n    <\/div>\n    <a class=\"rr-pf-cta-btn rr-hoverable\" href=\"\/staging\/contact-us\/\">SAY HELLO<\/a>\n<\/section>\n\n<script>\n(function () {\n    function rrInitPfCta() {\n        if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {\n            setTimeout(rrInitPfCta, 200);\n            return;\n        }\n\n        if (typeof window.rrBindHoverables === 'function') window.rrBindHoverables();\n\n        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n\n        var section = document.querySelector('.rr-pf-cta');\n        var band = document.querySelector('.rr-pf-cta-band');\n        if (!section || !band) return;\n\n        gsap.fromTo(band,\n            { xPercent: -30 },\n            {\n                xPercent: 0,\n                ease: 'none',\n                scrollTrigger: {\n                    trigger: section,\n                    start: 'top bottom',\n                    end: 'bottom top',\n                    scrub: 1\n                }\n            }\n        );\n    }\n    rrInitPfCta();\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>AI Automation Let AI handle the busywork, grow faster. We build AI-powered automations that handle the repetitive work, from customer [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1731","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/richierich.com.my\/staging\/wp-json\/wp\/v2\/pages\/1731","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/richierich.com.my\/staging\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/richierich.com.my\/staging\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/richierich.com.my\/staging\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/richierich.com.my\/staging\/wp-json\/wp\/v2\/comments?post=1731"}],"version-history":[{"count":13,"href":"https:\/\/richierich.com.my\/staging\/wp-json\/wp\/v2\/pages\/1731\/revisions"}],"predecessor-version":[{"id":1833,"href":"https:\/\/richierich.com.my\/staging\/wp-json\/wp\/v2\/pages\/1731\/revisions\/1833"}],"wp:attachment":[{"href":"https:\/\/richierich.com.my\/staging\/wp-json\/wp\/v2\/media?parent=1731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}