html {
            scroll-behavior: smooth;
        }


        body {
            background-color: #f0f9ff;

            background-image:
                linear-gradient(
                    to bottom,
                    rgba(255,255,255,0.15) 0%,
                    rgba(255,255,255,0.45) 100%
                ),
                url('https://lh3.googleusercontent.com/d/1_uJr5viwuC4N85Fo5GnzSIlpDvhPBQc4');

            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            background-repeat: no-repeat;
        }



        /* ====================================================== */
        /* REVEAL ANIMATION */
        /* ====================================================== */

        .reveal {
            opacity: 0;
            transform: translateY(40px);

            transition:
                opacity 0.8s cubic-bezier(0.5, 0, 0, 1),
                transform 0.8s cubic-bezier(0.5, 0, 0, 1);
        }


        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }


        .delay-100 {
            transition-delay: 100ms;
        }

        .delay-200 {
            transition-delay: 200ms;
        }

        .delay-300 {
            transition-delay: 300ms;
        }

        .delay-400 {
            transition-delay: 400ms;
        }

        .delay-500 {
            transition-delay: 500ms;
        }



        /* ====================================================== */
        /* NAVBAR */
        /* ====================================================== */

        .glass-nav-container {
            width: 100%;
        }


        .glass-pill {
            background: rgba(255, 255, 255, 0.65);

            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);

            border: 1px solid rgba(255, 255, 255, 0.85);

            box-shadow:
                0 4px 20px rgba(14, 165, 233, 0.08);

            transition: all 0.3s ease;
        }


        .glass-pill:hover {
            box-shadow:
                0 6px 24px rgba(14, 165, 233, 0.12);
        }


        /* ====================================================== */
        /* NAVBAR EXTRA GLASSMORPHISM SAAT SCROLL */
        /* ====================================================== */

        #navbar-container {
            background: rgba(255, 255, 255, 0);
            border-bottom: 1px solid transparent;

            backdrop-filter: blur(0px) saturate(100%);
            -webkit-backdrop-filter: blur(0px) saturate(100%);

            isolation: isolate;

            transition:
                background 0.5s cubic-bezier(.16, 1, .3, 1),
                backdrop-filter 0.5s cubic-bezier(.16, 1, .3, 1),
                -webkit-backdrop-filter 0.5s cubic-bezier(.16, 1, .3, 1),
                border-color 0.45s ease,
                padding 0.5s cubic-bezier(.16, 1, .3, 1),
                box-shadow 0.5s ease;
        }


        /* Lapisan kilau kaca */
        #navbar-container::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            pointer-events: none;

            opacity: 0;

            background:
                linear-gradient(
                    110deg,
                    rgba(255, 255, 255, 0.38) 0%,
                    rgba(255, 255, 255, 0.10) 28%,
                    rgba(14, 165, 233, 0.045) 55%,
                    rgba(255, 255, 255, 0.18) 78%,
                    rgba(255, 255, 255, 0.34) 100%
                );

            transition: opacity 0.5s ease;
        }


        #navbar-container.scrolled {

            padding-top: 0;
            padding-bottom: 0;
            padding-left: 0;
            padding-right: 0;

            /*
                Dibuat jauh lebih transparan supaya isi halaman
                benar-benar terlihat samar dari balik navbar.
            */
            background:
                rgba(248, 252, 255, 0.18);

            backdrop-filter:
                blur(30px)
                saturate(195%)
                brightness(1.06);

            -webkit-backdrop-filter:
                blur(30px)
                saturate(195%)
                brightness(1.06);

            border-bottom:
                1px solid rgba(255, 255, 255, 0.55);

            box-shadow:
                0 10px 38px rgba(15, 23, 42, 0.075),
                inset 0 1px 0 rgba(255, 255, 255, 0.78),
                inset 0 -1px 0 rgba(255, 255, 255, 0.22);
        }


        #navbar-container.scrolled::before {
            opacity: 1;
        }


        /* Garis pantulan tipis di bagian atas kaca */
        #navbar-container.scrolled::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 1px;
            z-index: 2;
            pointer-events: none;

            background:
                linear-gradient(
                    90deg,
                    transparent,
                    rgba(255, 255, 255, 0.95),
                    transparent
                );

            opacity: 0.85;
        }


        #navbar-container.scrolled #navbar-inner {

            padding-top: 0.75rem;
            padding-bottom: 0.75rem;

            padding-left: 1.5rem;
            padding-right: 1.5rem;

            transition:
                padding 0.5s cubic-bezier(.16, 1, .3, 1);
        }


        @media (min-width: 640px) {

            #navbar-container.scrolled #navbar-inner {

                padding-left: 2rem;
                padding-right: 2rem;
            }

        }


        /*
            Pill menu dan tombol hati dibuat lebih bening.
            Karena navbar utama sudah blur, ini memberi efek
            "kaca di atas kaca" tanpa terlihat putih solid.
        */
        #navbar-container.scrolled .glass-pill {

            background:
                linear-gradient(
                    135deg,
                    rgba(255, 255, 255, 0.20),
                    rgba(255, 255, 255, 0.08)
                );

            backdrop-filter:
                blur(18px)
                saturate(185%);

            -webkit-backdrop-filter:
                blur(18px)
                saturate(185%);

            border:
                1px solid rgba(255, 255, 255, 0.42);

            box-shadow:
                0 6px 22px rgba(15, 23, 42, 0.045),
                inset 0 1px 0 rgba(255, 255, 255, 0.62),
                inset 0 -1px 0 rgba(255, 255, 255, 0.14);
        }


        /* Sedikit efek refleksi pada pill saat hover */
        #navbar-container.scrolled .glass-pill:hover {

            background:
                linear-gradient(
                    135deg,
                    rgba(255, 255, 255, 0.27),
                    rgba(255, 255, 255, 0.11)
                );

            border-color:
                rgba(255, 255, 255, 0.58);

            box-shadow:
                0 8px 28px rgba(14, 165, 233, 0.07),
                inset 0 1px 0 rgba(255, 255, 255, 0.72);
        }


        /* ====================================================== */
        /* NAV ITEM */
        /* ====================================================== */

        .nav-item {

            position: relative;

            padding:
                0.5rem 1rem;

            border-radius:
                9999px;

            color:
                #64748b;

            font-weight:
                500;

            transition:
                color 0.3s ease;

            z-index:
                10;
        }


        .nav-item:hover {
            color:
                #0ea5e9;
        }


        .nav-item.active {
            color:
                white;
        }


        .nav-item.active:hover {
            color:
                white;
        }



        #nav-indicator {

            position: absolute;

            top: 6px;

            height:
                calc(100% - 12px);

            background-color:
                #0ea5e9;

            border-radius:
                9999px;

            box-shadow:
                0 2px 10px rgba(14, 165, 233, 0.3);

            transition:
                all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

            z-index:
                0;

            pointer-events:
                none;
        }



        /* ====================================================== */
        /* MAP */
        /* ====================================================== */

        .map-preview img {
            transition:
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
        }


        .map-preview:hover > img {
            transform:
                scale(1.025);
        }


        .map-location-card {

            transition:
                transform 0.3s ease,
                box-shadow 0.3s ease;
        }


        .map-location-card:hover {

            transform:
                translateY(-3px);

            box-shadow:
                0 16px 40px rgba(15, 23, 42, 0.16);
        }



        /* ====================================================== */
        /* MOBILE */
        /* ====================================================== */

        @media (max-width: 768px) {

            body {
                background-attachment: scroll;
            }

            .map-location-card {
                display: none;
            }

        }



        /* ====================================================== */
        /* HOMEPAGE LANJUTAN: CARA PRODUK, LOKASI DESA, FAQ */
        /* ====================================================== */

        .product-step-card {
            transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .35s ease;
        }

        .product-step-card:hover {
            transform: translateY(-7px);
            box-shadow: 0 22px 55px rgba(14, 165, 233, 0.10);
            border-color: rgba(125, 211, 252, 0.9);
        }

        .product-step-icon {
            transition: transform .45s cubic-bezier(.16,1,.3,1);
        }

        .product-step-card:hover .product-step-icon {
            transform: scale(1.06) rotate(-2deg);
        }

        .village-map-image {
            transition: transform 1.2s cubic-bezier(.16,1,.3,1);
        }

        .village-map-wrap:hover .village-map-image {
            transform: scale(1.025);
        }

        .faq-item {
            transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
        }

        .faq-answer {
            display: grid;
            grid-template-rows: 0fr;
            opacity: 0;
            transition: grid-template-rows .4s cubic-bezier(.16,1,.3,1), opacity .3s ease;
        }

        .faq-answer > div {
            overflow: hidden;
        }

        .faq-item.open {
            border-color: #bae6fd;
            box-shadow: 0 14px 40px rgba(14, 165, 233, 0.08);
        }

        .faq-item.open .faq-answer {
            grid-template-rows: 1fr;
            opacity: 1;
        }

        .faq-chevron {
            transition: transform .35s cubic-bezier(.16,1,.3,1);
        }

        .faq-item.open .faq-chevron {
            transform: rotate(180deg);
        }

        @media (max-width: 767px) {
            .step-connector {
                display: none;
            }
        }


        /* ====================================================== */
        /* SCROLL MOTION V2 - DIRECT SCROLL PROGRESS */
        /* ====================================================== */

        /*
            Penting:
            Versi ini TIDAK bergantung pada IntersectionObserver untuk
            menentukan animasi. Nilai transform dihitung langsung dari
            posisi elemen terhadap viewport melalui JavaScript.
        */

        .reveal {
            opacity: 1;
            filter: none;
            transform: none;
            will-change: transform, opacity, filter;
            transform-origin: center center;
        }

        .scroll-motion-item {
            backface-visibility: hidden;
            transform-style: preserve-3d;
            will-change: transform, opacity, filter;
        }

        .scroll-motion-section {
            backface-visibility: hidden;
            transform-origin: 50% 20%;
            will-change: transform, opacity, filter, clip-path;
        }

        /*
            Sedikit depth pada kartu ketika sedang muncul.
            Inline style dari JS yang akan menggerakkan nilainya.
        */
        article.scroll-motion-item,
        .product-step-card.scroll-motion-item,
        .faq-item.scroll-motion-item,
        .map-location-card.scroll-motion-item {
            transform-origin: 50% 60%;
        }

        /*
            Progress line tipis di bawah navbar.
            Ini bukan scrollbar browser, tetapi indikator perjalanan halaman.
        */
        #page-scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 2px;
            z-index: 9999;
            pointer-events: none;

            background:
                linear-gradient(
                    90deg,
                    rgba(14,165,233,.35),
                    #0ea5e9 45%,
                    #38bdf8 75%,
                    rgba(125,211,252,.55)
                );

            box-shadow:
                0 0 14px rgba(14,165,233,.32);

            transition: width .08s linear;
        }

        /*
            Hero mendapat cinematic depth saat halaman digeser.
            JS mengisi custom properties ini.
        */
        #beranda {
            --hero-y: 0px;
            --hero-scale: 1;
            --hero-opacity: 1;
            --hero-blur: 0px;
            --hero-bg-scale: 1;
        }

        #beranda > main {
            transform:
                translate3d(0, var(--hero-y), 0)
                scale(var(--hero-scale));

            opacity: var(--hero-opacity);
            filter: blur(var(--hero-blur));

            transform-origin: center center;
            will-change: transform, opacity, filter;
        }

        #beranda > div:first-of-type {
            transform: scale(var(--hero-bg-scale));
            transform-origin: center center;
            will-change: transform;
        }

        /*
            Saat navbar anchor dipakai, posisi section tidak tertutup navbar.
        */
        section[id] {
            scroll-margin-top: 95px;
        }

        /*
            Untuk layar kecil gerakan horizontal diperkecil.
        */
        @media (max-width: 767px) {
            #page-scroll-progress {
                height: 2px;
            }
        }


        /* ====================================================== */
        /* GUARANTEED HERO TEXT INTRO */
        /* ====================================================== */

        /*
            hero-js-ready mencegah flash satu frame sebelum JS berjalan.
            Setelah JS siap, Web Animations API mengambil alih.
        */
        html.hero-js-ready #hero-program-badge,
        html.hero-js-ready #hero-main-title,
        html.hero-js-ready #hero-description,
        html.hero-js-ready #hero-stats > div {
            opacity: 0;
        }

        #hero-program-badge,
        #hero-main-title,
        #hero-description,
        #hero-stats > div {
            will-change: transform, opacity, filter;
            backface-visibility: hidden;
        }

        #hero-main-title {
            transform-origin: center bottom;
        }


        /* Web Animations API adalah satu-satunya pengendali intro Hero */
        #hero-program-badge,
        #hero-main-title,
        #hero-description,
        #hero-stats > div {
            animation: none !important;
        }


        /* ====================================================== */
        /* HERO INTRO - SLOW & PROFESSIONAL */
        /* ====================================================== */

        /*
            State awal Hero sebelum JavaScript memulai animasi.
            Dibuat spesifik hanya untuk elemen Hero agar tidak
            mengganggu scroll animation section lain.
        */
        html.hero-intro-pending #hero-program-badge,
        html.hero-intro-pending #hero-main-title,
        html.hero-intro-pending #hero-description,
        html.hero-intro-pending #hero-stats > div {
            opacity: 0;
        }

        #hero-program-badge,
        #hero-main-title,
        #hero-description,
        #hero-stats > div {
            will-change: transform, opacity, filter;
            backface-visibility: hidden;
        }

        #hero-main-title {
            transform-origin: center bottom;
        }

        /*
            Hero tidak menggunakan CSS keyframe lain.
            Intro dikontrol penuh oleh Web Animations API.
        */
        #hero-program-badge,
        #hero-main-title,
        #hero-description,
        #hero-stats > div {
            animation: none !important;
        }

        /*
            Jika JavaScript dimatikan, konten tetap tampil.
        */


        /* ====================================================== */
        /* BERITA / KABAR DESA CIDADAP */
        /* ====================================================== */

        #berita {
            isolation: isolate;
        }

        .news-card {
            position: relative;
            background: rgba(255,255,255,.94);
            border: 1px solid rgba(226,232,240,.95);
            border-radius: 28px;
            overflow: hidden;
            box-shadow:
                0 12px 34px rgba(15,23,42,.055),
                inset 0 1px 0 rgba(255,255,255,.82);

            transition:
                transform .55s cubic-bezier(.16,1,.3,1),
                box-shadow .55s ease,
                border-color .4s ease;
        }

        .news-card:hover {
            transform: translateY(-8px);
            border-color: rgba(125,211,252,.95);
            box-shadow:
                0 26px 65px rgba(14,165,233,.13),
                inset 0 1px 0 rgba(255,255,255,.92);
        }

        .news-card-image {
            position: relative;
            height: 230px;
            overflow: hidden;
            background: #e0f2fe;
        }

        .news-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1.002);

            transition:
                transform .9s cubic-bezier(.16,1,.3,1),
                filter .6s ease;
        }

        .news-card:hover .news-card-image img {
            transform: scale(1.065);
            filter: saturate(1.04);
        }

        .news-card-image::after {
            content: "";
            position: absolute;
            inset: 0;

            background:
                linear-gradient(
                    to top,
                    rgba(15,23,42,.20) 0%,
                    rgba(15,23,42,.03) 42%,
                    transparent 70%
                );

            pointer-events: none;
        }

        .news-category {
            display: inline-flex;
            align-items: center;
            gap: 6px;

            padding: 7px 11px;
            border-radius: 999px;

            font-size: 10px;
            line-height: 1;
            font-weight: 800;
            letter-spacing: .035em;

            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);

            box-shadow: 0 5px 16px rgba(15,23,42,.06);
        }

        .news-featured-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;

            padding: 7px 11px;
            border-radius: 999px;

            background: rgba(14,165,233,.92);
            color: #fff;

            font-size: 10px;
            font-weight: 800;

            box-shadow: 0 7px 18px rgba(14,165,233,.25);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .news-title {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;

            transition: color .3s ease;
        }

        .news-card:hover .news-title {
            color: #0284c7;
        }

        .news-description {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .news-arrow {
            width: 38px;
            height: 38px;
            border-radius: 999px;

            display: inline-flex;
            align-items: center;
            justify-content: center;

            background: #f0f9ff;
            color: #0284c7;

            border: 1px solid #e0f2fe;

            transition:
                transform .4s cubic-bezier(.16,1,.3,1),
                background .3s ease,
                color .3s ease;
        }

        .news-card:hover .news-arrow {
            transform: translate(2px,-2px);
            background: #0ea5e9;
            color: #fff;
        }

        .news-view-all {
            position: relative;
            overflow: hidden;
        }

        .news-view-all::before {
            content: "";
            position: absolute;
            inset: 0;

            background:
                linear-gradient(
                    110deg,
                    transparent 20%,
                    rgba(255,255,255,.28) 48%,
                    transparent 72%
                );

            transform: translateX(-120%);
            transition: transform .7s cubic-bezier(.16,1,.3,1);
        }

        .news-view-all:hover::before {
            transform: translateX(120%);
        }

        @media (max-width: 767px) {
            .news-card-image {
                height: 205px;
            }
        }


        /* ====================================================== */
        /* CTA SEBELUM FOOTER */
        /* ====================================================== */

        .cidadap-cta {
            position: relative;
            overflow: hidden;

            background:
                radial-gradient(
                    circle at 15% 15%,
                    rgba(56,189,248,.24),
                    transparent 34%
                ),
                radial-gradient(
                    circle at 88% 72%,
                    rgba(125,211,252,.16),
                    transparent 32%
                ),
                linear-gradient(
                    135deg,
                    #075985 0%,
                    #0369a1 48%,
                    #0c4a6e 100%
                );

            border: 1px solid rgba(255,255,255,.14);

            box-shadow:
                0 30px 80px rgba(3,105,161,.22),
                inset 0 1px 0 rgba(255,255,255,.14);
        }


        .cidadap-cta::before {
            content: "";

            position: absolute;
            inset: 0;

            background-image:
                url('https://lh3.googleusercontent.com/d/1_uJr5viwuC4N85Fo5GnzSIlpDvhPBQc4');

            background-size: cover;
            background-position: center;

            opacity: .075;

            mix-blend-mode: luminosity;

            pointer-events: none;
        }


        .cidadap-cta::after {
            content: "";

            position: absolute;

            width: 310px;
            height: 310px;

            right: -110px;
            top: -120px;

            border: 1px solid rgba(255,255,255,.10);
            border-radius: 50%;

            box-shadow:
                0 0 0 36px rgba(255,255,255,.025),
                0 0 0 72px rgba(255,255,255,.018);

            pointer-events: none;
        }


        .cta-main-button,
        .cta-secondary-button {
            transition:
                transform .35s cubic-bezier(.16,1,.3,1),
                box-shadow .35s ease,
                background .3s ease,
                border-color .3s ease;
        }


        .cta-main-button:hover,
        .cta-secondary-button:hover {
            transform: translateY(-3px);
        }


        .cta-main-button:hover {
            box-shadow:
                0 15px 35px rgba(15,23,42,.20);
        }


        .cta-secondary-button:hover {
            background: rgba(255,255,255,.13);
            border-color: rgba(255,255,255,.38);
        }


        /* Tombol khusus pendaftaran UMKM */
        .cta-register-button {
            position: relative;
            overflow: hidden;

            transition:
                transform .35s cubic-bezier(.16,1,.3,1),
                box-shadow .35s ease,
                background .3s ease,
                border-color .3s ease;
        }


        .cta-register-button::before {
            content: "";

            position: absolute;
            inset: 0;

            background:
                linear-gradient(
                    110deg,
                    transparent 15%,
                    rgba(255,255,255,.15) 48%,
                    transparent 78%
                );

            transform:
                translateX(-125%);

            transition:
                transform .7s cubic-bezier(.16,1,.3,1);
        }


        .cta-register-button:hover {
            transform:
                translateY(-3px);

            background:
                rgba(125,211,252,.16);

            border-color:
                rgba(186,230,253,.42);

            box-shadow:
                0 12px 30px rgba(3,105,161,.18);
        }


        .cta-register-button:hover::before {
            transform:
                translateX(125%);
        }



        /* ====================================================== */
        /* FOOTER */
        /* ====================================================== */

        .site-footer {
            position: relative;
            overflow: hidden;

            background:
                linear-gradient(
                    145deg,
                    #071827 0%,
                    #08283d 52%,
                    #073552 100%
                );
        }


        .site-footer::before {
            content: "";

            position: absolute;
            inset: 0;

            background:
                radial-gradient(
                    circle at 12% 16%,
                    rgba(14,165,233,.10),
                    transparent 28%
                ),
                radial-gradient(
                    circle at 84% 82%,
                    rgba(56,189,248,.07),
                    transparent 24%
                );

            pointer-events: none;
        }


        .footer-link {
            position: relative;
            width: fit-content;

            color: #cbd5e1;

            transition:
                color .25s ease,
                transform .25s ease;
        }


        .footer-link::after {
            content: "";

            position: absolute;

            left: 0;
            bottom: -4px;

            width: 0;
            height: 1px;

            background: #38bdf8;

            transition: width .3s cubic-bezier(.16,1,.3,1);
        }


        .footer-link:hover {
            color: #ffffff;
            transform: translateX(2px);
        }


        .footer-link:hover::after {
            width: 100%;
        }


        .footer-contact-card {
            transition:
                background .3s ease,
                border-color .3s ease,
                transform .3s cubic-bezier(.16,1,.3,1);
        }


        .footer-contact-card:hover {
            transform: translateY(-2px);

            background: rgba(255,255,255,.075);

            border-color:
                rgba(125,211,252,.25);
        }


        @media (max-width: 767px) {

            .cidadap-cta::after {
                width: 220px;
                height: 220px;

                right: -100px;
                top: -90px;
            }

        }


        /* ====================================================== */
        /* CIDADAPBOT - FLOATING CHATBOT */
        /* ====================================================== */

        :root {
            --chat-brand: #0369a1;
            --chat-brand-dark: #075985;
            --chat-brand-deep: #0c4a6e;
            --chat-soft: #f0f9ff;
            --chat-border: #dbeafe;
            --chat-text: #0f172a;
            --chat-muted: #64748b;
        }


        #cidadapbot-launcher {
            position: fixed;

            right: 24px;
            bottom: 24px;

            width: 60px;
            height: 60px;

            z-index: 9998;

            border: 0;
            border-radius: 999px;

            display: flex;
            align-items: center;
            justify-content: center;

            color: white;

            background:
                linear-gradient(
                    145deg,
                    #0ea5e9,
                    #0284c7 52%,
                    #0369a1
                );

            box-shadow:
                0 18px 42px rgba(2,132,199,.30),
                inset 0 1px 0 rgba(255,255,255,.24);

            cursor: pointer;

            transition:
                transform .35s cubic-bezier(.16,1,.3,1),
                box-shadow .35s ease,
                opacity .25s ease;

            animation:
                cidadapbotLauncherIntro
                .8s
                cubic-bezier(.16,1,.3,1)
                .7s
                both;
        }


        #cidadapbot-launcher::before {
            content: "";

            position: absolute;
            inset: -7px;

            border:
                1px solid rgba(14,165,233,.18);

            border-radius: inherit;

            opacity: .7;

            animation:
                cidadapbotPulse
                2.8s
                ease-out
                2s
                2;
        }


        #cidadapbot-launcher:hover {
            transform:
                translateY(-4px)
                scale(1.04);

            box-shadow:
                0 22px 50px rgba(2,132,199,.36),
                inset 0 1px 0 rgba(255,255,255,.28);
        }


        #cidadapbot-launcher.chat-open {
            opacity: 0;
            transform: scale(.78);
            pointer-events: none;
        }


        @keyframes cidadapbotLauncherIntro {

            from {
                opacity: 0;
                transform:
                    translateY(18px)
                    scale(.86);
            }

            to {
                opacity: 1;
                transform:
                    translateY(0)
                    scale(1);
            }

        }


        @keyframes cidadapbotPulse {

            0% {
                transform: scale(.90);
                opacity: .7;
            }

            100% {
                transform: scale(1.38);
                opacity: 0;
            }

        }



        /* ====================================================== */
        /* CHAT WINDOW */
        /* ====================================================== */

        #cidadapbot-window {
            position: fixed;

            right: 24px;
            bottom: 24px;

            width: min(410px, calc(100vw - 32px));
            height: min(610px, calc(100vh - 42px));

            z-index: 9999;

            display: flex;
            flex-direction: column;

            background:
                rgba(255,255,255,.985);

            border:
                1px solid rgba(186,230,253,.90);

            border-radius:
                28px;

            overflow: hidden;

            box-shadow:
                0 30px 85px rgba(15,23,42,.22),
                0 8px 30px rgba(2,132,199,.10),
                inset 0 1px 0 rgba(255,255,255,.90);

            opacity: 0;

            transform:
                translateY(24px)
                scale(.965);

            transform-origin:
                100% 100%;

            pointer-events: none;

            transition:
                opacity .32s ease,
                transform .42s cubic-bezier(.16,1,.3,1);
        }


        #cidadapbot-window.open {
            opacity: 1;

            transform:
                translateY(0)
                scale(1);

            pointer-events: auto;
        }



        /* ====================================================== */
        /* HEADER */
        /* ====================================================== */

        .cidadapbot-header {
            position: relative;

            flex: none;

            padding:
                16px 18px;

            display: flex;
            align-items: center;

            gap: 12px;

            color: white;

            background:
                radial-gradient(
                    circle at 85% 15%,
                    rgba(56,189,248,.20),
                    transparent 34%
                ),
                linear-gradient(
                    135deg,
                    #075985,
                    #0369a1
                );

            box-shadow:
                0 8px 24px rgba(3,105,161,.14);
        }


        .cidadapbot-avatar {
            width: 42px;
            height: 42px;

            flex: none;

            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 14px;

            color: #bae6fd;

            background:
                rgba(255,255,255,.11);

            border:
                1px solid rgba(255,255,255,.16);

            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.13);
        }


        .cidadapbot-status-dot {
            width: 7px;
            height: 7px;

            flex: none;

            border-radius: 999px;

            background:
                #86efac;

            box-shadow:
                0 0 0 3px rgba(134,239,172,.12);
        }


        #cidadapbot-close {
            margin-left: auto;

            width: 38px;
            height: 38px;

            flex: none;

            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 12px;

            border: 1px solid transparent;

            color:
                rgba(255,255,255,.82);

            background:
                transparent;

            cursor: pointer;

            transition:
                background .25s ease,
                border-color .25s ease,
                color .25s ease,
                transform .25s ease;
        }


        #cidadapbot-close:hover {
            color: white;

            background:
                rgba(255,255,255,.10);

            border-color:
                rgba(255,255,255,.12);

            transform:
                rotate(4deg);
        }



        /* ====================================================== */
        /* MESSAGE AREA */
        /* ====================================================== */

        #cidadapbot-messages {
            flex: 1;

            min-height: 0;

            overflow-y: auto;

            padding:
                22px 18px
                14px;

            scroll-behavior: smooth;

            background:
                linear-gradient(
                    180deg,
                    #ffffff,
                    #fbfdff
                );
        }


        #cidadapbot-messages::-webkit-scrollbar {
            width: 7px;
        }


        #cidadapbot-messages::-webkit-scrollbar-track {
            background:
                transparent;
        }


        #cidadapbot-messages::-webkit-scrollbar-thumb {
            background:
                #cbd5e1;

            border-radius:
                999px;

            border:
                2px solid white;
        }


        .cidadapbot-message-row {
            width: 100%;

            display: flex;

            margin-bottom: 14px;
        }


        .cidadapbot-message-row.bot {
            justify-content: flex-start;
        }


        .cidadapbot-message-row.user {
            justify-content: flex-end;
        }


        .cidadapbot-message {
            max-width: 82%;

            padding:
                12px 14px;

            border-radius:
                18px;

            font-size:
                13px;

            line-height:
                1.65;

            word-break:
                break-word;

            animation:
                cidadapbotMessageIn
                .42s
                cubic-bezier(.16,1,.3,1)
                both;
        }


        .cidadapbot-message.bot {
            color: #0f172a;

            background:
                #f0f9ff;

            border:
                1px solid #dbeafe;

            border-bottom-left-radius:
                7px;

            box-shadow:
                0 8px 22px rgba(15,23,42,.045);
        }


        .cidadapbot-message.user {
            color: white;

            background:
                linear-gradient(
                    135deg,
                    #0284c7,
                    #0369a1
                );

            border:
                1px solid rgba(3,105,161,.55);

            border-bottom-right-radius:
                7px;

            box-shadow:
                0 9px 24px rgba(2,132,199,.16);
        }


        @keyframes cidadapbotMessageIn {

            from {
                opacity: 0;

                transform:
                    translateY(8px)
                    scale(.985);
            }

            to {
                opacity: 1;

                transform:
                    translateY(0)
                    scale(1);
            }

        }


        .cidadapbot-answer-actions {
            display: flex;
            flex-wrap: wrap;

            gap: 7px;

            margin-top: 10px;
        }


        .cidadapbot-answer-link {
            display: inline-flex;
            align-items: center;

            gap: 5px;

            padding:
                7px 10px;

            border-radius:
                999px;

            color:
                #0369a1;

            background:
                rgba(255,255,255,.78);

            border:
                1px solid #bae6fd;

            font-size:
                10px;

            font-weight:
                750;

            text-decoration: none;

            transition:
                transform .25s cubic-bezier(.16,1,.3,1),
                background .25s ease,
                color .25s ease;
        }


        .cidadapbot-answer-link:hover {
            color: white;

            background:
                #0284c7;

            transform:
                translateY(-1px);
        }



        /* ====================================================== */
        /* TYPING */
        /* ====================================================== */

        .cidadapbot-typing {
            display: inline-flex;
            align-items: center;

            gap: 5px;

            padding:
                12px 14px;

            border-radius:
                18px 18px 18px 7px;

            background:
                #f0f9ff;

            border:
                1px solid #dbeafe;

            box-shadow:
                0 7px 18px rgba(15,23,42,.04);
        }


        .cidadapbot-typing span {
            width: 6px;
            height: 6px;

            border-radius: 50%;

            background:
                #38bdf8;

            animation:
                cidadapbotTyping
                1.05s
                infinite
                ease-in-out;
        }


        .cidadapbot-typing span:nth-child(2) {
            animation-delay:
                .13s;
        }


        .cidadapbot-typing span:nth-child(3) {
            animation-delay:
                .26s;
        }


        @keyframes cidadapbotTyping {

            0%,
            70%,
            100% {
                transform:
                    translateY(0);

                opacity:
                    .40;
            }

            35% {
                transform:
                    translateY(-4px);

                opacity:
                    1;
            }

        }



        /* ====================================================== */
        /* QUICK QUESTIONS */
        /* ====================================================== */

        .cidadapbot-quick-wrap {
            flex: none;

            padding:
                10px 16px
                12px;

            background:
                #ffffff;

            border-top:
                1px solid #eef2f7;
        }


        #cidadapbot-quick {
            display: flex;
            flex-wrap: wrap;

            gap: 7px;

            max-height: 88px;

            overflow-y: auto;

            padding-right: 3px;
        }


        #cidadapbot-quick::-webkit-scrollbar {
            width: 5px;
        }


        #cidadapbot-quick::-webkit-scrollbar-thumb {
            background:
                #dbeafe;

            border-radius:
                999px;
        }


        .cidadapbot-chip {
            display: inline-flex;
            align-items: center;

            gap: 6px;

            padding:
                7px 10px;

            border-radius:
                999px;

            border:
                1px solid #bae6fd;

            color:
                #0369a1;

            background:
                #f0f9ff;

            font-size:
                10.5px;

            font-weight:
                650;

            line-height:
                1;

            cursor: pointer;

            white-space:
                nowrap;

            transition:
                transform .25s cubic-bezier(.16,1,.3,1),
                background .25s ease,
                border-color .25s ease;
        }


        .cidadapbot-chip:hover {
            transform:
                translateY(-1px);

            background:
                #e0f2fe;

            border-color:
                #7dd3fc;
        }



        /* ====================================================== */
        /* INPUT */
        /* ====================================================== */

        .cidadapbot-inputbar {
            flex: none;

            display: grid;

            grid-template-columns:
                40px
                minmax(0,1fr)
                42px;

            align-items: center;

            gap: 8px;

            padding:
                11px 12px
                12px;

            background:
                #fff;

            border-top:
                1px solid #e2e8f0;
        }


        .cidadapbot-mini-button,
        #cidadapbot-send {
            width: 40px;
            height: 40px;

            display: flex;
            align-items: center;
            justify-content: center;

            border-radius:
                999px;

            cursor: pointer;

            transition:
                transform .25s cubic-bezier(.16,1,.3,1),
                background .25s ease;
        }


        .cidadapbot-mini-button {
            color:
                #0284c7;

            border:
                1px solid #bae6fd;

            background:
                #f0f9ff;
        }


        .cidadapbot-mini-button:hover {
            background:
                #e0f2fe;

            transform:
                rotate(-5deg);
        }


        .cidadapbot-input-shell {
            min-width: 0;

            height: 42px;

            display: flex;
            align-items: center;

            border:
                2px solid #bae6fd;

            border-radius:
                999px;

            background:
                #fff;

            transition:
                border-color .25s ease,
                box-shadow .25s ease;
        }


        .cidadapbot-input-shell:focus-within {
            border-color:
                #0ea5e9;

            box-shadow:
                0 0 0 4px rgba(14,165,233,.10);
        }


        #cidadapbot-input {
            width: 100%;

            padding:
                0 14px;

            border: 0;
            outline: 0;

            background:
                transparent;

            color:
                #0f172a;

            font-size:
                13px;
        }


        #cidadapbot-input::placeholder {
            color:
                #94a3b8;
        }


        #cidadapbot-send {
            width: 42px;
            height: 42px;

            border: 0;

            color:
                white;

            background:
                linear-gradient(
                    135deg,
                    #0ea5e9,
                    #0284c7
                );

            box-shadow:
                0 8px 18px rgba(2,132,199,.20);
        }


        #cidadapbot-send:hover {
            transform:
                translateY(-2px)
                rotate(-2deg);

            background:
                linear-gradient(
                    135deg,
                    #0284c7,
                    #0369a1
                );
        }



        /* ====================================================== */
        /* MOBILE */
        /* ====================================================== */

        @media (max-width: 640px) {

            #cidadapbot-launcher {
                right: 16px;
                bottom: 16px;

                width: 56px;
                height: 56px;
            }


            #cidadapbot-window {
                right: 10px;
                bottom: 10px;

                width:
                    calc(100vw - 20px);

                height:
                    min(
                        650px,
                        calc(100dvh - 20px)
                    );

                border-radius:
                    24px;
            }


            .cidadapbot-header {
                padding:
                    13px 14px;
            }


            #cidadapbot-messages {
                padding:
                    18px 14px
                    12px;
            }


            .cidadapbot-message {
                max-width:
                    88%;
            }


            .cidadapbot-quick-wrap {
                padding-left:
                    12px;

                padding-right:
                    12px;
            }


            .cidadapbot-inputbar {
                padding-left:
                    10px;

                padding-right:
                    10px;
            }

        }


        @media (prefers-reduced-motion: reduce) {

            #cidadapbot-launcher,
            #cidadapbot-window,
            .cidadapbot-message,
            .cidadapbot-typing span {

                animation:
                    none !important;

                transition-duration:
                    .01ms !important;
            }

        }


        /* ====================================================== */
        /* PERFORMANCE OPTIMIZATION - VISUAL TETAP SAMA */
        /* ====================================================== */

        /*
            background-attachment: fixed pada BODY bisa menyebabkan repaint
            halaman besar setiap scroll. Visual yang sama dipindahkan ke
            pseudo-element fixed/composited.
        */
        html {
            background-color: #f0f9ff;
        }

        body {
            background-image: none !important;
            background-color: transparent !important;
            background-attachment: scroll !important;

            isolation: isolate;
        }

        body::before {
            content: "";

            position: fixed;
            inset: 0;

            z-index: -1;

            pointer-events: none;

            background-color: #f0f9ff;

            background-image:
                linear-gradient(
                    to bottom,
                    rgba(255,255,255,0.15) 0%,
                    rgba(255,255,255,0.45) 100%
                ),
                url('https://lh3.googleusercontent.com/d/1_uJr5viwuC4N85Fo5GnzSIlpDvhPBQc4');

            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;

            transform: translateZ(0);

            backface-visibility: hidden;
        }


        /*
            Jangan menahan puluhan GPU layer secara permanen.
            will-change hanya aktif saat elemen benar-benar dekat viewport.
        */
        .scroll-motion-item,
        .scroll-motion-section {
            will-change: auto !important;
        }

        .scroll-motion-item.motion-active {
            will-change:
                transform,
                opacity,
                filter !important;
        }

        .scroll-motion-section.motion-active {
            will-change:
                transform,
                opacity,
                filter,
                clip-path !important;
        }


        /*
            Progress bar sebelumnya mengubah width setiap frame.
            ScaleX memberi tampilan identik tetapi tidak memicu layout.
        */
        #page-scroll-progress {
            width: 100% !important;

            transform:
                scaleX(0);

            transform-origin:
                left center;

            transition:
                none !important;

            will-change:
                transform;
        }


        /*
            Isolasi paint untuk komponen fixed besar.
            Tidak mengubah desain, hanya membantu compositor browser.
        */
        #navbar-container,
        #cidadapbot-window,
        #cidadapbot-launcher {
            transform:
                translateZ(0);

            backface-visibility:
                hidden;
        }


        /*
            Gambar offscreen dirender ketika mendekati viewport.
            Browser yang tidak mendukung content-visibility akan mengabaikannya.
        */
        .news-card,
        .product-step-card {
            content-visibility:
                auto;

            contain-intrinsic-size:
                auto 420px;
        }


        @media (max-width: 768px) {

            body::before {
                background-size:
                    cover;
            }

        }