#home-banner,
    #home-banner-mobile,
    #keunggulan {
        --hero-primary: #2B386D;
        --hero-secondary: #3D64A5;
        --hero-dark: #000000;
        --hero-light: #FFFFFF;
    }

    #home-banner .text-gradient,
    #home-banner-mobile .text-gradient {
        background: linear-gradient(180deg, var(--hero-primary) 0%, var(--hero-secondary) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: var(--hero-primary);
    }

    #home-banner .text-gradient-green,
    #home-banner-mobile .text-gradient-green {
        background: linear-gradient(180deg, var(--hero-secondary) 0%, var(--hero-primary) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: var(--hero-secondary);
    }

    #home-banner p,
    #home-banner-mobile p {
        color: rgba(43, 56, 109, 0.82) !important;
    }

    #home-banner .btn-primary,
    #home-banner-mobile .btn-primary {
        background: linear-gradient(180deg, var(--hero-secondary) 0%, var(--hero-primary) 100%);
        border: 1px solid var(--hero-primary);
        color: var(--hero-light) !important;
    }

    #home-banner .btn-primary:hover,
    #home-banner-mobile .btn-primary:hover {
        background: var(--hero-primary) !important;
        border-color: var(--hero-primary) !important;
        color: var(--hero-light) !important;
    }

    #home-banner .btn-outline,
    #home-banner-mobile .btn-outline {
        background: var(--hero-light);
        color: var(--hero-primary) !important;
        border: 1px solid var(--hero-secondary);
        box-shadow: 0 4px 14px rgba(43, 56, 109, 0.08);
    }

    #home-banner .btn-outline:hover,
    #home-banner-mobile .btn-outline:hover {
        background: var(--hero-secondary);
        color: var(--hero-light) !important;
        border-color: var(--hero-secondary);
        box-shadow: 0 8px 18px rgba(43, 56, 109, 0.2);
    }

    #home-banner .card-hero-custom,
    #home-banner-mobile .card-hero-custom {
        background: var(--hero-light) !important;
        border: 1px solid rgba(61, 100, 165, 0.24);
        box-shadow: 0 12px 26px rgba(43, 56, 109, 0.12) !important;
    }

    #home-banner .icon-box-gradient,
    #home-banner-mobile .icon-box-gradient {
        background: linear-gradient(180deg, var(--hero-secondary) 0%, var(--hero-primary) 100%);
    }

    #home-banner .text-muted,
    #home-banner-mobile .text-muted {
        color: rgba(43, 56, 109, 0.72) !important;
    }

    #home-banner h5,
    #home-banner h6,
    #home-banner-mobile h5,
    #home-banner-mobile h6 {
        color: var(--hero-dark);
    }

    /* Keunggulan rebranding palette */
    #keunggulan {
        background: var(--hero-light);
    }

    #keunggulan .section-text.text-gradient {
        background: none;
        -webkit-text-fill-color: initial;
        color: var(--hero-primary) !important;
    }

    #keunggulan img[alt="Icon Header"] {
        filter: none;
    }

    #keunggulan .feature-card {
        background: var(--hero-light);
        border: 1px solid rgba(61, 100, 165, 0.35);
        box-shadow: 0 6px 16px rgba(43, 56, 109, 0.08);
    }

    #keunggulan .feature-card:hover {
        border-color: var(--hero-secondary);
        box-shadow: 0 12px 24px rgba(43, 56, 109, 0.15);
        transform: translateY(-5px);
    }

    #keunggulan .feature-title {
        color: var(--hero-secondary) !important;
        font-weight: 700;
    }

    #keunggulan .feature-title::after {
        background-color: var(--hero-secondary) !important;
    }

    #keunggulan .feature-icon-img {
        filter: none;
        border: 2px solid var(--hero-secondary);
        border-radius: 14px;
        padding: 6px;
        background: var(--hero-light);
        box-shadow: 0 6px 14px rgba(43, 56, 109, 0.14);
    }

    #keunggulan .feature-card:hover .feature-icon-img {
        border-color: var(--hero-primary);
    }

    #keunggulan .feature-desc {
        color: rgba(43, 56, 109, 0.84);
    }

    /* Skema rebranding palette */
    .skema-section {
        --rb-primary: #2B386D;
        --rb-secondary: #3D64A5;
        --rb-dark: #000000;
        --rb-light: #FFFFFF;
        background: var(--rb-light);
    }

    .skema-section .section-text.text-gradient {
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: var(--rb-primary) !important;
    }

    .skema-section .card {
        border: 1px solid rgba(61, 100, 165, 0.35) !important;
        border-radius: 12px !important;
        background: var(--rb-light) !important;
        box-shadow: 0 8px 20px rgba(43, 56, 109, 0.08) !important;
        transition: all 0.3s ease;
    }

    .skema-section .card:hover {
        border-color: var(--rb-secondary) !important;
        box-shadow: 0 14px 28px rgba(43, 56, 109, 0.16) !important;
        transform: translateY(-4px);
    }

    .skema-section .card h5 {
        color: var(--rb-primary) !important;
    }

    .skema-section .card .bi {
        color: var(--rb-secondary) !important;
    }

    .skema-section .card .d-flex.align-items-center.small span {
        color: rgba(43, 56, 109, 0.82) !important;
    }

    .skema-section .card .fw-semibold.fs-5 {
        color: var(--rb-primary) !important;
    }

    .skema-section .btn.btn-primary {
        background: linear-gradient(180deg, var(--rb-secondary) 0%, var(--rb-primary) 100%) !important;
        border: 1px solid var(--rb-primary) !important;
        color: var(--rb-light) !important;
    }

    .skema-section .btn.btn-primary:hover {
        background: var(--rb-primary) !important;
        border-color: var(--rb-primary) !important;
        color: var(--rb-light) !important;
    }

    /* Komitmen rebranding palette */
    #komitmen-section {
        --rb-primary: #2B386D;
        --rb-secondary: #3D64A5;
        --rb-dark: #000000;
        --rb-light: #FFFFFF;
        background: var(--rb-light);
    }

    #komitmen-section .section-text.text-gradient {
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: var(--rb-primary) !important;
    }

    #komitmen-section .comm-card {
        background: var(--rb-light) !important;
        border: 1px solid rgba(61, 100, 165, 0.28) !important;
        border-radius: 16px !important;
        box-shadow: 0 10px 24px rgba(43, 56, 109, 0.1) !important;
    }

    #komitmen-section .comm-card:hover {
        transform: translateY(-5px);
        border-color: var(--rb-secondary) !important;
        box-shadow: 0 14px 30px rgba(43, 56, 109, 0.16) !important;
    }

    #komitmen-section .comm-header {
        background: linear-gradient(180deg, var(--rb-secondary) 0%, var(--rb-primary) 100%) !important;
        box-shadow: 0 6px 16px rgba(43, 56, 109, 0.24) !important;
    }

    #komitmen-section .comm-name {
        color: var(--rb-light) !important;
    }

    #komitmen-section .comm-role {
        color: rgba(255, 255, 255, 0.86) !important;
    }

    #komitmen-section .comm-desc {
        color: rgba(43, 56, 109, 0.9) !important;
    }

    #komitmen-section .comm-img {
        border: 2px solid var(--rb-light);
    }

    /* Berita rebranding palette */
    .berita-section {
        --rb-primary: #2B386D;
        --rb-secondary: #3D64A5;
        --rb-dark: #000000;
        --rb-light: #FFFFFF;
        background: var(--rb-light);
    }

    .berita-section .section-text.text-gradient {
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: var(--rb-primary) !important;
    }

    .berita-section p[style*="color: #153F61"] {
        color: var(--rb-primary) !important;
    }

    .berita-section .card {
        border: 1px solid rgba(61, 100, 165, 0.3) !important;
        border-radius: 12px !important;
        background: var(--rb-light) !important;
        box-shadow: 0 8px 20px rgba(43, 56, 109, 0.1) !important;
        transition: all 0.3s ease;
    }

    .berita-section .card:hover {
        border-color: var(--rb-secondary) !important;
        box-shadow: 0 14px 28px rgba(43, 56, 109, 0.18) !important;
        transform: translateY(-4px);
    }

    .berita-section .card-title {
        color: var(--rb-primary) !important;
    }

    .berita-section .card-text {
        color: rgba(43, 56, 109, 0.9) !important;
    }

    .berita-section .border-bottom {
        border-bottom-color: rgba(61, 100, 165, 0.24) !important;
    }

    .berita-section .border-bottom span,
    .berita-section .border-bottom strong {
        color: rgba(43, 56, 109, 0.82) !important;
    }

    .berita-section .badge {
        background-color: rgba(61, 100, 165, 0.3) !important;
        border-color: rgba(255, 255, 255, 0.45) !important;
        color: var(--rb-light) !important;
    }

    .berita-section .btn.btn-primary {
        background: linear-gradient(180deg, var(--rb-secondary) 0%, var(--rb-primary) 100%) !important;
        border: 1px solid var(--rb-primary) !important;
        color: var(--rb-light) !important;
    }

    .berita-section .btn.btn-primary:hover {
        background: var(--rb-primary) !important;
        border-color: var(--rb-primary) !important;
        color: var(--rb-light) !important;
    }

    /* Asesor rebranding palette */
    .asesor-section {
        --rb-primary: #2B386D;
        --rb-secondary: #3D64A5;
        --rb-dark: #000000;
        --rb-light: #FFFFFF;
        background: var(--rb-light);
    }

    .asesor-section .section-text.text-gradient {
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: var(--rb-primary) !important;
    }

    .asesor-section .asesor-card {
        background: var(--rb-light) !important;
        border: 1px solid rgba(61, 100, 165, 0.26) !important;
        border-radius: 16px !important;
        box-shadow: 0 10px 24px rgba(43, 56, 109, 0.1) !important;
        transition: all 0.3s ease;
    }

    .asesor-section .asesor-card:hover {
        border-color: var(--rb-secondary) !important;
        box-shadow: 0 14px 30px rgba(43, 56, 109, 0.18) !important;
    }

    .asesor-section .asesor-header {
        background: linear-gradient(180deg, var(--rb-secondary) 0%, var(--rb-primary) 100%) !important;
    }

    .asesor-section .card-title {
        color: var(--rb-light) !important;
    }

    .asesor-section .asesor-avatar img {
        border: 3px solid var(--rb-light);
        box-shadow: 0 6px 16px rgba(43, 56, 109, 0.22) !important;
    }

    .asesor-section .text-custom-blue,
    .asesor-section a.text-custom-blue {
        color: var(--rb-primary) !important;
    }

    .asesor-section a.text-custom-blue:hover {
        color: var(--rb-secondary) !important;
    }

    .asesor-section .btn.btn-primary {
        background: linear-gradient(180deg, var(--rb-secondary) 0%, var(--rb-primary) 100%) !important;
        border: 1px solid var(--rb-primary) !important;
        color: var(--rb-light) !important;
    }

    .asesor-section .btn.btn-primary:hover {
        background: var(--rb-primary) !important;
        border-color: var(--rb-primary) !important;
        color: var(--rb-light) !important;
    }

    /* Sebaran Asesi rebranding palette */
    .sebaran-section {
        --rb-primary: #2B386D;
        --rb-secondary: #3D64A5;
        --rb-dark: #000000;
        --rb-light: #FFFFFF;
        background: var(--rb-light);
    }

    .sebaran-section .section-text.text-gradient {
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: var(--rb-primary) !important;
    }

    .sebaran-section .sebaran-map-title,
    .sebaran-section .sebaran-distribusi-title {
        color: var(--rb-dark) !important;
    }

    .sebaran-section .sebaran-map-subtitle,
    .sebaran-section #remaining-text {
        color: var(--rb-primary) !important;
    }

    .sebaran-section .card-map {
        border: 1px solid rgba(61, 100, 165, 0.26) !important;
        box-shadow: 0 10px 24px rgba(43, 56, 109, 0.1) !important;
    }

    .sebaran-section .sebaran-total-card {
        background: linear-gradient(135deg, var(--rb-secondary) 0%, var(--rb-primary) 100%) !important;
    }

    .sebaran-section .sebaran-total-label,
    .sebaran-section .sebaran-total-number,
    .sebaran-section .sebaran-total-subtext {
        color: var(--rb-light) !important;
    }

    .sebaran-section .province-card {
        border-left: 5px solid var(--rb-secondary) !important;
        box-shadow: 0 8px 20px rgba(43, 56, 109, 0.1) !important;
    }

    .sebaran-section .province-card:hover {
        border-left-color: var(--rb-primary) !important;
        box-shadow: 0 12px 24px rgba(43, 56, 109, 0.16) !important;
    }

    .sebaran-section .sebaran-province-name,
    .sebaran-section .sebaran-province-count {
        color: var(--rb-primary) !important;
    }

    .sebaran-section .badge-highest {
        background-color: rgba(61, 100, 165, 0.18) !important;
        color: var(--rb-primary) !important;
    }

    .sebaran-pin {
        color: var(--rb-primary);
        font-size: 28px;
        filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.3));
    }

    .sebaran-popup-header {
        background: linear-gradient(135deg, var(--rb-secondary) 0%, var(--rb-primary) 100%) !important;
    }

    .sebaran-popup-small {
        line-height: 1;
    }

    .sebaran-popup-stat {
        background-color: rgba(61, 100, 165, 0.1);
        border-radius: 14px;
    }

    .sebaran-popup-icon-box {
        width: 35px;
        height: 35px;
        background-color: var(--rb-primary);
        color: var(--rb-light);
    }

    /* Dipercaya Industri rebranding palette */
    .dipercaya-section {
        --rb-primary: #2B386D;
        --rb-secondary: #3D64A5;
        --rb-dark: #000000;
        --rb-light: #FFFFFF;
        background: var(--rb-light);
    }

    .dipercaya-section .section-text.text-gradient {
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: var(--rb-primary) !important;
    }

    .dipercaya-section .nav-pills .nav-link {
        background: var(--rb-light) !important;
        border: 1px solid var(--rb-secondary) !important;
        color: var(--rb-primary) !important;
        box-shadow: 0 4px 12px rgba(43, 56, 109, 0.08);
    }

    .dipercaya-section .nav-pills .nav-link:hover {
        background: rgba(61, 100, 165, 0.1) !important;
        color: var(--rb-primary) !important;
    }

    .dipercaya-section .nav-pills .nav-link.active {
        background: linear-gradient(180deg, var(--rb-secondary) 0%, var(--rb-primary) 100%) !important;
        color: var(--rb-light) !important;
        border-color: var(--rb-primary) !important;
        box-shadow: 0 8px 18px rgba(43, 56, 109, 0.22) !important;
    }

    .dipercaya-section .partner-card {
        background: var(--rb-light) !important;
        border: 1px solid rgba(61, 100, 165, 0.35) !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 18px rgba(43, 56, 109, 0.08) !important;
    }

    .dipercaya-section .partner-card:hover {
        border-color: var(--rb-secondary) !important;
        box-shadow: 0 12px 24px rgba(43, 56, 109, 0.16) !important;
        transform: translateY(-4px);
    }

    /* Testimoni rebranding palette */
    .testimonial-rebrand {
        --rb-primary: #2B386D;
        --rb-secondary: #3D64A5;
        --rb-dark: #000000;
        --rb-light: #FFFFFF;
        background: var(--rb-light);
    }

    .testimonial-rebrand h2 {
        background: linear-gradient(180deg, var(--rb-primary) 0%, var(--rb-secondary) 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        color: var(--rb-primary) !important;
    }

    .testimonial-rebrand .fs-5 {
        color: var(--rb-primary) !important;
    }

    .testimonial-rebrand .card {
        background: var(--rb-light) !important;
        border: 1px solid rgba(61, 100, 165, 0.28) !important;
        box-shadow: 0 8px 20px rgba(43, 56, 109, 0.1) !important;
    }

    .testimonial-rebrand .hover-card:hover {
        box-shadow: 0 14px 28px rgba(43, 56, 109, 0.18) !important;
        transform: translateY(-5px);
    }

    .testimonial-rebrand .text-warning,
    .testimonial-rebrand .text-warning i {
        color: var(--rb-secondary) !important;
    }

    .testimonial-rebrand .card-text {
        color: rgba(43, 56, 109, 0.9) !important;
    }

    .testimonial-rebrand h6.text-dark {
        color: var(--rb-dark) !important;
    }

    .testimonial-rebrand small {
        color: rgba(43, 56, 109, 0.72) !important;
    }

    .testimonial-rebrand .border-top {
        border-top-color: rgba(61, 100, 165, 0.25) !important;
    }

    .testimonial-rebrand .btn.btn-light {
        background: var(--rb-light) !important;
        border: 1px solid rgba(61, 100, 165, 0.4) !important;
        color: var(--rb-primary) !important;
    }

    .testimonial-rebrand .btn.btn-light:hover,
    .testimonial-rebrand .btn-nav-custom:hover {
        background: var(--rb-secondary) !important;
        color: var(--rb-light) !important;
        border-color: var(--rb-secondary) !important;
    }

    .testimonial-rebrand .dot {
        background-color: rgba(61, 100, 165, 0.3) !important;
    }

    .testimonial-rebrand .dot.active {
        background-color: var(--rb-primary) !important;
    }

    .testimonial-rebrand .text-primary {
        color: var(--rb-primary) !important;
    }

    .testimonial-rebrand .btn.btn-primary {
        background: linear-gradient(180deg, var(--rb-secondary) 0%, var(--rb-primary) 100%) !important;
        border: 1px solid var(--rb-primary) !important;
        color: var(--rb-light) !important;
    }

    .testimonial-rebrand .btn.btn-primary:hover {
        background: var(--rb-primary) !important;
        border-color: var(--rb-primary) !important;
        color: var(--rb-light) !important;
    }

    /* FAQ rebranding palette */
    .faq-section {
        --rb-primary: #2B386D;
        --rb-secondary: #3D64A5;
        --rb-dark: #000000;
        --rb-light: #FFFFFF;
        background: var(--rb-light);
    }

    .faq-section .section-text.text-gradient {
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: var(--rb-primary) !important;
    }

    .faq-section .card-hover-effect {
        border: 1px solid rgba(61, 100, 165, 0.3) !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 18px rgba(43, 56, 109, 0.08) !important;
    }

    .faq-section .card-hover-effect:hover {
        border-color: var(--rb-secondary) !important;
        box-shadow: 0 12px 24px rgba(43, 56, 109, 0.16) !important;
        transform: translateY(-2px);
    }

    .faq-section .btn-faq h5,
    .faq-section .btn-faq .text-primary,
    .faq-section .btn-faq .bi {
        color: var(--rb-primary) !important;
    }

    .faq-section .btn-faq:hover h5,
    .faq-section .btn-faq:hover .bi {
        color: var(--rb-secondary) !important;
    }

    .faq-section .card-body.text-dark {
        color: rgba(43, 56, 109, 0.9) !important;
    }

    .faq-section .faq-cta-card {
        background: linear-gradient(135deg, var(--rb-secondary) 0%, var(--rb-primary) 100%) !important;
    }

    .faq-section .faq-cta-card h5 {
        color: var(--rb-light) !important;
    }

    .faq-section .btn.btn-green {
        background: var(--rb-light) !important;
        border: 1px solid var(--rb-light) !important;
        color: var(--rb-primary) !important;
    }

    .faq-section .btn.btn-green:hover {
        background: rgba(255, 255, 255, 0.9) !important;
        border-color: var(--rb-light) !important;
        color: var(--rb-primary) !important;
    }