.home-reference {
        --ref-green: var(--pp-green);
        --ref-blue: var(--pp-light-green);
        --ref-beige: var(--pp-light-green);
        --ref-sage: var(--pp-light-green);
        --ref-terracotta: var(--pp-orange);
        --ref-ivory: var(--pp-cream);
        --ref-cream: var(--pp-cream);
        --ref-text: var(--pp-text);
        --ref-muted: var(--pp-text);
        background: var(--ref-ivory);
        color: var(--ref-text);
        overflow: hidden;
    }

    .home-reference .reference-container {
        max-width: 1180px;
    }

    .home-reference a {
        text-decoration: none;
    }

    .reference-eyebrow {
        color: #f26322;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .reference-title {
        color: var(--ref-green);
        font-size: clamp(1.55rem, 2.7vw, 2.25rem);
        font-weight: 700;
        letter-spacing: -.035em;
        line-height: 1.2;
    }

    .reference-copy {
        color: var(--ref-text);
        font-size: .82rem;
        line-height: 1.75;
    }

    .reference-muted {
        color: var(--ref-muted);
    }

    .reference-btn-primary,
    .reference-btn-outline {
        border-radius: .6rem;
        display: inline-block;
        font-size: .8rem;
        font-weight: 600;
        padding: .75rem 1.35rem;
        transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .reference-btn-primary {
        background: #f26322;
        box-shadow: 0 8px 16px rgba(242, 99, 34, .2);
        color: #fff;
    }

    .reference-btn-outline {
        border: 1px solid #f26322;
        color: #f26322;
    }

    .reference-btn-primary:hover,
    .reference-btn-outline:hover {
        background: #d9521b;
        box-shadow: 0 11px 19px rgba(242, 99, 34, .28);
        color: #fff;
        transform: translateY(-2px);
    }

    /* Hero */
    .reference-hero {
        background: var(--ref-cream);
        min-height: 560px;
        padding: 1rem 0 76px;
        position: relative;
    }

    .reference-hero::before {
        background: rgba(230, 239, 234, .17);
        border-radius: 50%;
        content: '';
        height: 350px;
        left: -250px;
        position: absolute;
        top: 38px;
        width: 350px;
    }

    .reference-hero-copy {
        position: relative;
        z-index: 2;
    }

    .reference-hero h1 {
        color: var(--ref-green);
        font-size: clamp(2.45rem, 4.3vw, 4.15rem);
        font-weight: 700;
        letter-spacing: -.05em;
        line-height: 1.13;
        max-width: 500px;
    }

    .reference-hero-description {
        font-size: .9rem;
        line-height: 1.78;
        max-width: 405px;
    }

    .reference-love {
        color: var(--ref-muted);
        font-size: .7rem;
        line-height: 1.5;
        max-width: none;
        white-space: nowrap;
    }

    .reference-love strong {
        font-weight: 700;
    }

    .reference-love i {
        color: var(--ref-green);
        font-size: 1.65rem;
    }

    .reference-hero-actions {
        margin-bottom: 0 !important;
    }

    .reference-hero-actions .reference-btn-outline {
        align-items: center;
        display: inline-flex;
        gap: .45rem;
    }

    .reference-hero-art {
        min-height: 400px;
        position: relative;
    }

    .reference-hero-image {
        background: url('../images/Joyful_Childrens_Painted_Group.png') center/contain no-repeat;
        height: 100%;
        inset: 0 0 0 1.5rem;
        position: absolute;
    }

    .reference-values {
        background: rgba(250, 247, 242, .97);
        border: 1px solid rgba(230, 239, 234, .38);
        border-radius: 1rem;
        bottom: -52px;
        box-shadow: 0 16px 30px rgba(19, 76, 67, .13);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        left: -6%;
        padding: 1.05rem .6rem;
        position: absolute;
        right: -6%;
        z-index: 3;
    }

    .reference-values-wide {
        bottom: auto;
        left: auto;
        margin-top: .5rem;
        position: relative;
        right: auto;
    }

    .reference-value {
        min-width: 0;
        padding: .1rem .8rem;
    }

    .reference-value+.reference-value {
        border-left: 1px solid rgba(34, 34, 34, .2);
    }

    .reference-value-icon {
        color: var(--ref-green);
        font-size: 1.65rem;
        line-height: 1;
    }

    .reference-value-icon.is-terracotta {
        color: var(--ref-terracotta);
    }

    .reference-value h2 {
        color: var(--ref-green);
        font-size: .75rem;
        font-weight: 700;
        margin: .35rem 0;
    }

    .reference-value p {
        color: var(--ref-muted);
        font-size: .62rem;
        line-height: 1.5;
        margin: 0;
    }

    /* Tentang */
    .reference-about {
        background: var(--ref-ivory);
        padding: 88px 0 62px;
    }

    .reference-about-photo {
        border-radius: 1rem;
        box-shadow: 0 14px 28px rgba(19, 76, 67, .13);
        height: 275px;
        object-fit: cover;
        width: 100%;
    }

    .reference-about-content {
        padding-right: clamp(0rem, 5vw, 3.8rem);
        position: relative;
    }

    .reference-about-mark {
        bottom: -35px;
        opacity: .25;
        position: absolute;
        right: -55px;
        width: min(235px, 42vw);
        z-index: 0;
    }

    .reference-about-content>*:not(.reference-about-mark) {
        position: relative;
        z-index: 1;
    }

    /* Cara kerja */
    .home-reference .home-about-flow {
        background: var(--ref-cream);
        padding: 3.6rem 0 3.4rem;
    }

    .home-reference .home-about-flow .reference-title {
        font-size: clamp(1.45rem, 2.2vw, 1.95rem);
    }

    .home-reference .about-flow-intro {
        color: var(--ref-muted);
        font-size: .9rem;
        line-height: 1.7;
        margin: .8rem auto 2rem;
        max-width: 570px;
    }

    .home-reference .about-flow-steps {
        display: grid;
        gap: 1.4rem;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        isolation: isolate;
        position: relative;
    }

    .home-reference .about-step {
        position: relative;
        text-align: center;
        z-index: 2;
    }

    .home-reference .about-step:not(:last-child)::before {
        border-top: 1px dashed rgba(19, 76, 67, .25);
        content: '';
        left: calc(50% + 59px);
        position: absolute;
        top: 59px;
        width: calc(100% + 1.4rem - 118px);
        z-index: -1;
    }

    .home-reference .about-step-icon {
        align-items: center;
        background: rgba(230, 239, 234, .85);
        border-radius: 50%;
        color: var(--ref-green);
        display: flex;
        font-size: 2.65rem;
        height: 118px;
        justify-content: center;
        margin: 0 auto;
        position: relative;
        width: 118px;
        z-index: 1;
    }

    .home-reference .about-step-icon.step-terracotta { background: rgba(242, 99, 34, .14); color: var(--ref-orange); }
    .home-reference .about-step-icon.step-blue { background: rgba(183, 207, 227, .55); color: #367cb8; }

    .home-reference .about-step-number {
        align-items: center;
        background: var(--ref-green);
        border: 4px solid var(--ref-cream);
        border-radius: 50%;
        bottom: -25px;
        color: #fff;
        display: inline-flex;
        font-size: .92rem;
        font-weight: 700;
        height: 49px;
        justify-content: center;
        position: absolute;
        width: 49px;
    }

    .home-reference .about-step:not(:last-child)::after {
        align-items: center;
        background: var(--ref-cream);
        border-radius: 50%;
        color: var(--ref-green);
        content: '›';
        display: flex;
        font-size: 2.3rem;
        font-weight: 700;
        height: 38px;
        justify-content: center;
        position: absolute;
        right: -.95rem;
        top: 40px;
        width: 38px;
        z-index: 3;
    }

    .home-reference .about-step h3 {
        color: var(--ref-green);
        font-size: .88rem;
        font-weight: 600;
        line-height: 1.5;
        margin: 1.5rem 0 0;
        padding-top: .45rem;
    }

    /* Program */
    .reference-program {
        background: var(--ref-cream);
        padding: 55px 0 65px;
    }

    .reference-program-card {
        background: rgba(255, 253, 249, .78);
        border: 1px solid rgba(230, 239, 234, .25);
        border-radius: .9rem;
        box-shadow: 0 8px 22px rgba(19, 76, 67, .05);
        height: 100%;
        padding: 1.5rem 1rem;
        text-align: center;
    }

    .reference-program-icon {
        align-items: center;
        border-radius: 50%;
        color: var(--ref-cream);
        display: inline-flex;
        font-size: 1.25rem;
        height: 52px;
        justify-content: center;
        width: 52px;
    }

    .reference-program-card h3 {
        color: var(--ref-green);
        font-size: .82rem;
        font-weight: 700;
        margin: .85rem 0 .45rem;
    }

    .reference-program-card p {
        color: var(--ref-muted);
        font-size: .68rem;
        line-height: 1.6;
        margin: 0;
    }

    .program-sage {
        background: var(--ref-green);
    }

    .program-beige {
        background: var(--ref-terracotta);
    }

    .program-blue {
        background: var(--ref-green);
    }

    .program-terracotta {
        background: var(--ref-terracotta);
    }

    /* Dampak */
    .reference-impact {
        background: var(--ref-ivory);
        padding: 22px 0 42px;
    }

    .reference-stat-bar {
        background: var(--ref-green);
        border-radius: 1rem;
        box-shadow: 0 14px 27px rgba(19, 76, 67, .16);
    }

    .reference-stat {
        color: #fff;
        padding: 1.25rem 1.25rem;
    }

    .reference-stat+.reference-stat {
        border-left: 1px solid rgba(255, 255, 255, .18);
    }

    .reference-stat i {
        color: var(--ref-beige);
        font-size: 1.85rem;
    }

    .reference-stat-number {
        font-size: clamp(1.35rem, 2.25vw, 1.8rem);
        font-weight: 700;
        line-height: 1;
    }

    .reference-stat-label {
        color: rgba(255, 255, 255, .78);
        font-size: .68rem;
        line-height: 1.5;
    }

    /* Wishlist menggantikan area Berita Terbaru */
    .reference-wishlist {
        background: var(--ref-cream);
        padding: 42px 0 46px;
    }

    .reference-wishlist-card {
        background: #fffdf9;
        border: 1px solid rgba(230, 239, 234, .3);
        border-radius: .75rem;
        box-shadow: 0 7px 18px rgba(19, 76, 67, .06);
        height: 100%;
        overflow: hidden;
        transition: transform .2s ease, box-shadow .2s ease;
    }

    .reference-wishlist-card:hover {
        box-shadow: 0 14px 26px rgba(19, 76, 67, .13);
        transform: translateY(-4px);
    }

    .reference-wishlist-card img {
        height: 125px;
        object-fit: cover;
        width: 100%;
    }

    .reference-wishlist-card .card-body {
        padding: .85rem;
    }

    .reference-wishlist-card h3 {
        color: var(--ref-green);
        font-size: .7rem;
        font-weight: 700;
        line-height: 1.45;
        margin-bottom: .45rem;
    }

    .reference-wishlist-card p {
        color: var(--ref-muted);
        font-size: .61rem;
        line-height: 1.5;
        margin-bottom: .55rem;
    }

    .reference-wishlist-card .progress {
        background: #eee9df;
        height: .38rem;
    }

    .reference-wishlist-card .progress-bar {
        background: var(--ref-terracotta);
    }

    .reference-wishlist-card .wishlist-link {
        color: #f26322;
        font-size: .64rem;
        font-weight: 700;
    }

    .reference-wishlist-header {
        align-items: end;
        display: flex;
        gap: 1.25rem;
        justify-content: space-between;
    }

    .reference-wishlist-panti-link {
        align-items: center;
        display: inline-flex;
        flex: 0 0 auto;
        gap: .45rem;
        white-space: nowrap;
    }

    /* CTA penutup */
    .reference-final-cta {
        background: var(--ref-ivory);
        padding: 0 0 3rem;
    }

    .reference-final-cta-panel {
        background: #f1ede5;
        border-radius: 1.6rem;
        display: grid;
        grid-template-columns: 35% 65%;
        min-height: 210px;
        overflow: hidden;
        position: relative;
    }

    .reference-final-cta-panel::before {
        background: url('../images/cta-niat-baik-brush.png') -1.1rem center / auto 116% no-repeat;
        content: '';
        height: 100%;
        left: 0;
        -webkit-mask-image: linear-gradient(90deg, #000 0 45%, rgba(0, 0, 0, .92) 53%, rgba(0, 0, 0, .5) 65%, transparent 76%);
        mask-image: linear-gradient(90deg, #000 0 45%, rgba(0, 0, 0, .92) 53%, rgba(0, 0, 0, .5) 65%, transparent 76%);
        pointer-events: none;
        position: absolute;
        top: 0;
        width: min(54vw, 640px);
        z-index: 0;
    }

    .reference-final-cta-art {
        align-items: center;
        color: #fff;
        display: flex;
        flex-direction: column;
        font-family: cursive;
        font-size: clamp(1.55rem, 2.4vw, 2.3rem);
        font-style: italic;
        justify-content: center;
        line-height: 1.16;
        padding: 1.5rem 2.4rem;
        position: relative;
        text-align: center;
        z-index: 1;
    }

    .reference-final-cta-copy {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 1.55rem 3.5rem 1.55rem 4.4rem;
        position: relative;
        z-index: 1;
    }

    .reference-final-cta-copy h2 {
        color: var(--ref-green);
        font-size: clamp(1.75rem, 2.6vw, 2.35rem);
        font-weight: 700;
        letter-spacing: -.045em;
        line-height: 1.15;
        margin: 0 0 .65rem;
    }

    .reference-final-cta-copy p {
        font-size: .95rem;
        line-height: 1.55;
        margin: 0 0 1rem;
    }

    .reference-final-cta-button {
        align-items: center;
        background: var(--ref-green);
        border-radius: .85rem;
        color: #fff !important;
        display: inline-flex;
        font-size: 1rem;
        font-weight: 600;
        gap: 1.75rem;
        padding: .8rem 1.4rem;
        transition: background .2s ease, transform .2s ease;
    }

    .reference-final-cta-button:hover {
        background: #0d3e37;
        transform: translateY(-2px);
    }

    @media (min-width: 992px) {
        .reference-values-wide {
            display: grid !important;
        }

        .reference-eyebrow {
            font-size: .75rem;
        }

        .reference-copy {
            font-size: .9rem;
        }

        .reference-btn-primary,
        .reference-btn-outline {
            font-size: .88rem;
        }

        .reference-hero-description {
            font-size: 1rem;
            max-width: 470px;
        }

        .reference-love {
            font-size: .8rem;
            max-width: 245px;
        }

        .reference-value h2 {
            font-size: .88rem;
        }

        .reference-value p {
            font-size: .73rem;
        }

        .reference-program-card h3 {
            font-size: .95rem;
        }

        .reference-program-card p {
            font-size: .78rem;
        }

        .reference-stat-label {
            font-size: .78rem;
        }

        .reference-wishlist-card img {
            height: 140px;
        }

        .reference-wishlist-card h3 {
            font-size: .83rem;
        }

        .reference-wishlist-card p {
            font-size: .72rem;
        }

        .reference-wishlist-card .wishlist-link {
            font-size: .73rem;
        }

    }

    @media (max-width: 991.98px) {
        .home-reference .about-flow-steps {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            row-gap: 3rem;
        }

        .home-reference .about-step::before,
        .home-reference .about-step::after {
            display: none;
        }

        .reference-hero {
            padding-top: 1rem;
        }

        .reference-hero-art {
            margin: 2rem auto 4.5rem;
            max-width: 650px;
        }

        .reference-values {
            left: 0;
            right: 0;
        }

        .reference-about {
            padding-top: 78px;
        }

    }

    @media (max-width: 575.98px) {
        .home-reference .home-about-flow {
            padding: 2.8rem 0 2.6rem;
        }

        .home-reference .about-flow-steps {
            gap: 1.8rem;
            grid-template-columns: 1fr;
            margin: 0 auto;
            max-width: 365px;
        }

        .home-reference .about-step {
            display: block;
            min-height: 112px;
            text-align: center;
        }

        .home-reference .about-flow-intro {
            font-size: .84rem;
            margin-bottom: 2.5rem;
        }

        .home-reference .about-step-icon {
            font-size: 2.15rem;
            height: 92px;
            margin: 0 auto;
            width: 92px;
        }

        .home-reference .about-step-number {
            bottom: -23px;
            height: 44px;
            width: 44px;
        }

        .home-reference .about-step h3 {
            font-size: .8rem;
            margin-top: .8rem;
        }

        .home-reference .about-step:not(:last-child)::before {
            border-left: 1px dashed rgba(230, 239, 234, .72);
            border-top: 0;
            bottom: -1.9rem;
            display: block;
            left: calc(50% - 1px);
            top: 92px;
            width: 0;
            z-index: 0;
        }

        .home-reference .about-step:not(:last-child)::after {
            bottom: -1.9rem;
            content: '↓';
            display: flex;
            font-size: 1.4rem;
            height: 30px;
            left: calc(50% - 15px);
            right: auto;
            top: auto;
            width: 30px;
        }

        .reference-hero {
            background: radial-gradient(circle at 90% 12%, rgba(230, 239, 234, .52), transparent 28%), radial-gradient(circle at 4% 72%, rgba(230, 239, 234, .26), transparent 28%), var(--ref-cream);
            padding: 1rem 0 34px;
        }

        .reference-hero::before {
            display: none;
        }

        .reference-hero h1 {
            font-size: 2.45rem;
            margin-bottom: .9rem !important;
        }

        .reference-hero-description {
            font-size: .98rem;
            line-height: 1.8;
            max-width: 100%;
        }

        .reference-hero-art-mobile {
            display: flex;
            margin: 1.6rem 0 1rem;
            min-height: 0;
        }

        .reference-hero-art-mobile .reference-values {
            bottom: auto;
            grid-template-columns: 1fr;
            left: auto;
            max-width: 100%;
            padding: .55rem 1rem;
            position: relative;
            right: auto;
            width: 100%;
        }

        .reference-value {
            align-items: center;
            display: grid;
            grid-template-columns: 2rem 1fr;
            padding: .55rem 0;
        }

        .reference-value+.reference-value {
            border-left: 0;
            border-top: 1px solid rgba(34, 34, 34, .2);
        }

        .reference-value-icon {
            font-size: 1.15rem;
            grid-row: span 2;
        }

        .reference-value h2 {
            font-size: .76rem;
            margin: 0;
        }

        .reference-value p {
            display: block;
            font-size: .65rem;
            grid-column: 2;
        }

        .reference-love-mobile {
            margin: 1rem 0 0;
            max-width: 100%;
        }

        .reference-actions-mobile {
            margin-top: 1rem;
        }

        .reference-actions-mobile .reference-btn-primary,
        .reference-actions-mobile .reference-btn-outline {
            text-align: center;
            width: 100%;
        }

        .reference-actions-mobile .reference-btn-outline {
            align-items: center;
            display: flex;
            gap: .45rem;
            justify-content: center;
        }

        .reference-about {
            padding: 54px 0 45px;
        }

        .reference-about-photo {
            height: 225px;
        }

        .reference-about-content {
            padding-right: 0;
        }

        .reference-about-mark {
            bottom: -24px;
            right: -25px;
            width: 135px;
        }

        .reference-program,
        .reference-wishlist {
            padding: 45px 0;
        }

        .reference-wishlist-header {
            align-items: flex-start;
            flex-direction: column;
        }

        .reference-program-card {
            padding: 1.05rem .55rem;
        }

        .reference-program-card h3 {
            font-size: .75rem;
        }

        .reference-program-card p {
            font-size: .62rem;
        }

        .reference-stat+.reference-stat {
            border-left: 0;
            border-top: 1px solid rgba(255, 255, 255, .18);
        }

        .reference-stat {
            padding: 1rem 1.15rem;
        }

        .reference-wishlist-card {
            display: grid;
            grid-template-columns: 42% 58%;
        }

        .reference-wishlist-card img {
            height: 100%;
            min-height: 145px;
        }

        .reference-wishlist-card .card-body {
            padding: .9rem;
        }

        .reference-wishlist-card h3 {
            font-size: .74rem;
        }

        .reference-wishlist-card p {
            font-size: .65rem;
        }

        .reference-final-cta {
            padding-bottom: 3rem;
        }

        .reference-final-cta-panel {
            border-radius: 1.15rem;
            grid-template-columns: 1fr;
        }

        .reference-final-cta-panel::before {
            display: none;
        }

        .reference-final-cta-art {
            background: url('../images/cta-niat-baik-brush.png') center / cover no-repeat, var(--ref-green);
            font-size: 1.8rem;
            min-height: 150px;
            padding: 1.7rem 2rem;
        }

        .reference-final-cta-copy {
            align-items: center;
            padding: 1.8rem 1.35rem 2rem;
            text-align: center;
        }

        .reference-final-cta-copy h2 {
            font-size: 1.75rem;
        }

        .reference-final-cta-copy p {
            font-size: .92rem;
        }

        .reference-final-cta-button {
            justify-content: center;
            width: 100%;
        }
    }