:root {
        --pf-body-font: "Source Sans 3", "Source Sans Pro", sans-serif;
        --pf-head-font: "Nunito", sans-serif;
        --pf-orange: #f0883a;
        --pf-orange-d: #e0701f;
        --pf-orange-ink: #9a4a12;
        --pf-bg: #fff8f0;
        --pf-card: #ffffff;
        --pf-line: #f0e7db;
        --pf-ink: #241a12;
        --pf-muted: #7d6f62;
        --pf-card-h: 205px;
        --pf-feat-h: calc(var(--pf-card-h) * 2 + 1.4rem);
    }
    .pf {
        position: relative;
        overflow: visible;
        padding-top: clamp(2.5rem, 4vw, 4rem);
        padding-bottom: clamp(7rem, 9vw, 9rem);
        background: var(--pf-bg);
        color: var(--pf-ink);
        font-family: var(--pf-body-font);
    }
    .pf * {
        box-sizing: border-box;
    }
    .pf .doodle {
        position: absolute;
        pointer-events: none;
        opacity: 0.6;
        z-index: 0;
    }
    .pf .pf-doodle--cloud {
        top: 3%;
        right: 4%;
        width: 110px;
    }
    .pf .pf-doodle--star {
        top: 14%;
        left: 3%;
        width: 46px;
        transform: rotate(-12deg);
    }
    .pf .pf-doodle--sun {
        bottom: 8%;
        left: 5%;
        width: 78px;
    }
    .pf .pf-doodle--flower {
        right: 6%;
        bottom: 12%;
        width: 60px;
    }
    .pf-wrap {
        max-width: 1220px;
        margin: 0 auto;
        padding-inline: clamp(1rem, 4vw, 2rem);
        position: relative;
        z-index: 2;
    }
    .pf-head {
        max-width: 680px;
        margin: 0 auto clamp(1.2rem, 2.6vw, 2rem);
        text-align: center;
    }
    .pf-title {
        margin: 0.7rem 0 0.6rem;
        color: var(--pf-ink);
        font-family: var(--pf-head-font);
        font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.25rem);
        font-weight: 900;
        letter-spacing: -0.01em;
        line-height: 1.1;
    }
    .pf-title .hl {
        color: var(--pf-orange-d);
        position: relative;
        white-space: nowrap;
    }
    .pf-title .hl::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0.06em;
        height: 0.34em;
        background: #ffdcb4;
        z-index: -1;
        border-radius: 6px;
    }
    .pf-sub {
        color: var(--pf-muted);
        font-size: 0.98rem;
        line-height: 1.6;
    }
    .pf .stars {
        display: inline-flex;
        gap: 1px;
        color: #f5a623;
        font-size: 0.95rem;
    }
    .pf .avatar {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        border-radius: 50%;
        color: #fff;
        font-family: var(--pf-head-font);
        font-size: 1.02rem;
        font-weight: 800;
    }
    .pf .play-btn {
        width: 62px;
        height: 62px;
        position: relative;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.92);
        color: var(--pf-orange-d);
        box-shadow: 0 12px 30px -10px rgba(120, 60, 10, 0.7);
        transition: transform 0.22s ease, background 0.22s ease;
    }
    .pf .play-btn i {
        margin-left: 3px;
        font-size: 1.6rem;
    }
    .pf .play-btn::after {
        content: "";
        position: absolute;
        inset: -8px;
        border: 2px solid rgba(255, 255, 255, 0.55);
        border-radius: 50%;
        opacity: 0;
        transition: 0.4s ease;
    }
    .pf .vcard,
    .pf .icard {
        width: 100%;
        position: relative;
        display: block;
        overflow: hidden;
        border: 0;
        border-radius: 22px;
        padding: 0;
        background: #1c130c;
        box-shadow: 0 20px 44px -28px rgba(60, 35, 10, 0.6);
        text-align: left;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .pf .vcard {
        cursor: pointer;
    }
    .pf .icard {
        cursor: pointer;
    }
    .pf .icard.is-placeholder {
        cursor: default;
        background: #fff;
    }
    .pf .icard.is-placeholder .poster {
        height: 100%;
        display: grid;
        place-items: center;
        padding: 1rem;
        color: var(--pf-orange-ink);
        text-align: center;
        font-family: var(--pf-head-font);
        font-size: 1rem;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }
    .pf .icard.is-placeholder .poster span {
        border: 1px solid rgba(154, 74, 18, 0.16);
        border-radius: 999px;
        padding: 0.55rem 1rem;
        background: rgba(240, 136, 58, 0.12);
    }
    .pf .vcard.is-placeholder {
        cursor: default;
        background: #fff;
        pointer-events: none;
    }
    .pf .vcard.is-placeholder:hover {
        transform: none;
        box-shadow: 0 20px 44px -28px rgba(60, 35, 10, 0.6);
    }
    .pf .vcard.is-placeholder .poster {
        height: 100%;
        min-height: 0;
        display: grid;
        place-items: center;
        padding: 1rem;
        color: var(--pf-orange-ink);
        text-align: center;
        font-family: var(--pf-head-font);
        font-size: 1rem;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        background: linear-gradient(180deg, #fff8f0 0%, #ffe8cf 100%);
    }
    .pf .vcard.is-placeholder .poster span {
        border: 1px solid rgba(154, 74, 18, 0.16);
        border-radius: 999px;
        padding: 0.55rem 1rem;
        background: rgba(240, 136, 58, 0.12);
    }
    .pf .vcard.is-placeholder .chip {
        z-index: 2;
    }
    .pf .vcard:hover,
    .pf .icard:hover {
        transform: translateY(-5px);
        box-shadow: 0 30px 56px -26px rgba(60, 35, 10, 0.62);
    }
    .pf .vcard:hover .play-btn {
        transform: scale(1.08);
        background: #fff;
    }
    .pf .vcard:hover .play-btn::after {
        inset: -12px;
        opacity: 1;
    }
    .pf .vcard .poster,
    .pf .icard .poster {
        width: 100%;
        display: block;
        object-fit: cover;
    }
    .pf .vcard .veil,
    .pf .icard .veil {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(20, 12, 6, 0.05) 30%, rgba(20, 12, 6, 0.82) 100%);
    }
    .pf .vcard .ctr {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
    }
    .pf .vcard .chip {
        position: absolute;
        top: 0.85rem;
        left: 0.85rem;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        white-space: nowrap;
        border-radius: 999px;
        padding: 0.32rem 0.62rem;
        background: rgba(240, 136, 58, 0.95);
        box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5);
        color: #fff;
        font-family: var(--pf-head-font);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.03em;
    }
    .pf .vcard .dur {
        position: absolute;
        top: 0.85rem;
        right: 0.85rem;
        display: inline-flex;
        align-items: center;
        gap: 0.32rem;
        white-space: nowrap;
        border-radius: 7px;
        padding: 0.26rem 0.55rem;
        background: rgba(15, 10, 6, 0.62);
        backdrop-filter: blur(2px);
        color: #fff;
        font-size: 0.72rem;
        font-weight: 700;
    }
    .pf .icard .badge {
        position: absolute;
        top: 0.85rem;
        left: 0.85rem;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        white-space: nowrap;
        border-radius: 999px;
        padding: 0.32rem 0.62rem;
        background: rgba(255, 248, 240, 0.92);
        box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.45);
        color: var(--pf-orange-ink);
        font-family: var(--pf-head-font);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.03em;
    }
    .pf .icard .stars {
        position: absolute;
        top: 0.85rem;
        right: 0.85rem;
        border-radius: 999px;
        padding: 0.28rem 0.55rem;
        background: rgba(15, 10, 6, 0.5);
        backdrop-filter: blur(2px);
        color: #ffd76a;
        box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.45);
    }
    .pf .vcard .who,
    .pf .icard .who {
        position: absolute;
        left: 1rem;
        right: 1rem;
        bottom: 0.95rem;
        display: flex;
        align-items: center;
        gap: 0.6rem;
        color: #fff;
    }
    .pf .vcard .who .avatar,
    .pf .icard .who .avatar {
        width: 38px;
        height: 38px;
        border: 2px solid rgba(255, 255, 255, 0.7);
        font-size: 0.86rem;
    }
    .pf .vcard .who .nm,
    .pf .icard .who .nm {
        white-space: nowrap;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
        font-family: var(--pf-head-font);
        font-size: 0.98rem;
        font-weight: 800;
        line-height: 1.1;
    }
    .pf .vcard .who .role,
    .pf .icard .who .role {
        color: rgba(255, 255, 255, 0.85);
        font-size: 0.78rem;
    }
    .pf .icard .quote-line {
        position: absolute;
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        color: #fff;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.58);
        font-family: var(--pf-head-font);
        font-size: 0.86rem;
        font-weight: 800;
        line-height: 1.45;
    }
    .pf-feature {
        display: grid;
        grid-template-columns: 1.5fr 1fr;
        gap: 1.4rem;
        margin-bottom: 0;
        height: var(--pf-feat-h);
    }
    .pf .vcard--hero {
        height: 100%;
    }
    .pf .vcard--hero .poster {
        height: 100%;
        min-height: 0;
    }
    .pf .vcard--hero .play-btn {
        width: 84px;
        height: 84px;
    }
    .pf .vcard--hero .play-btn i {
        font-size: 2.1rem;
    }
    .pf .vcard--hero .who .nm {
        font-size: 1.18rem;
    }
    .pf .vcard--hero .quote-line {
        position: absolute;
        left: 1.4rem;
        right: 1.4rem;
        bottom: 1.25rem;
        color: #fff;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
        font-family: var(--pf-head-font);
        font-size: 0.9rem;
        font-weight: 800;
        line-height: 1.35;
    }
    .pf-feature .side {
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 1.4rem;
    }
    .pf-feature .side > * {
        height: var(--pf-card-h);
        flex: 0 0 auto;
    }
    .pf .vcard--side .poster {
        height: 100%;
        min-height: 0;
    }
    .pf-bento {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr;
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) 110px;
        grid-template-areas:
            "hero b c"
            "hero d e"
            "f f f";
        gap: 1.4rem;
        height: var(--pf-feat-h);
    }
    .pf-bento > * {
        height: 100%;
        min-height: 0;
        margin: 0;
    }
    .pf-bento .ba {
        grid-area: hero;
    }
    .pf-bento .bb {
        grid-area: b;
    }
    .pf-bento .bc {
        grid-area: c;
    }
    .pf-bento .bd {
        grid-area: d;
    }
    .pf-bento .be {
        grid-area: e;
    }
    .pf-bento .bf {
        grid-area: f;
    }
    .pf-bento .vcard .poster {
        height: 100%;
        min-height: 0;
    }
    .pf-bento .icard .poster {
        height: 100%;
        min-height: 0;
    }
    .pf .icard.is-flag .poster {
        object-position: center bottom;
        transform: translateY(-65%);
    }
    .pf-bento .icard .quote-line {
        bottom: 1rem;
        font-size: 0.84rem;
    }
    .pf-bento .bf.icard .quote-line {
        -webkit-line-clamp: 2;
        bottom: 1rem;
        font-size: 0.82rem;
    }
    .pf-bento .bf.icard .who .nm {
        font-size: 0.92rem;
    }
    .pf-bento--alt {
        grid-template-columns: 1fr 1fr 1.5fr;
        grid-template-rows: 150px minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "f f hero"
            "b c hero"
            "b e hero";
    }
    .pf-slider {
        position: relative;
        padding-inline: 3rem;
    }
    .pf-viewport {
        overflow: hidden;
        height: auto;
        transition: height 0.45s ease;
    }
    .pf-track {
        display: flex;
        align-items: flex-start;
        will-change: transform;
        transition: transform 0.6s cubic-bezier(0.45, 0, 0.15, 1);
    }
    .pf-slide {
        flex: 0 0 100%;
        min-width: 100%;
        padding-block: 14px;
    }
    .pf-arrow {
        position: absolute;
        top: 46%;
        z-index: 6;
        width: 46px;
        height: 46px;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 12px 26px -10px rgba(120, 60, 10, 0.55);
        color: var(--pf-orange-d);
        cursor: pointer;
        font-size: 1.25rem;
        transform: translateY(-50%);
        transition: 0.2s ease;
    }
    .pf-arrow:hover {
        transform: translateY(-50%) scale(1.06);
        background: var(--pf-orange);
        color: #fff;
    }
    .pf-arrow--prev {
        left: -10px;
    }
    .pf-arrow--next {
        right: -10px;
    }
    .pf-dots {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 1.3rem;
    }
    .pf-dot {
        width: 9px;
        height: 9px;
        border: 0;
        border-radius: 50%;
        padding: 0;
        background: #e7d3bf;
        cursor: pointer;
        transition: 0.25s ease;
    }
    .pf-dot:hover {
        background: #d9b896;
    }
    .pf-dot.active {
        width: 26px;
        border-radius: 6px;
        background: var(--pf-orange);
    }
    .pf-lb {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: none;
        place-items: center;
        padding: clamp(0.8rem, 3vw, 2rem);
        background: rgba(28, 16, 7, 0.72);
        backdrop-filter: blur(7px);
        opacity: 0;
        transition: opacity 0.25s ease;
    }
    .pf-lb.open {
        display: grid;
        opacity: 1;
    }
    .pf-lb-card {
        position: relative;
        width: min(880px, 100%);
        overflow: hidden;
        border-radius: 22px;
        background: #120c07;
        box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
        transform: translateY(14px) scale(0.985);
        transition: transform 0.28s ease;
    }
    .pf-lb.open .pf-lb-card {
        transform: none;
    }
    .pf-lb-card.is-image-mode {
        width: auto;
        max-width: min(92vw, 980px);
        background: transparent;
        box-shadow: none;
    }
    .pf-lb-stage {
        position: relative;
        aspect-ratio: 16 / 9;
        background: #000;
    }
    .pf-lb-card.is-image-mode .pf-lb-stage {
        aspect-ratio: auto;
        background: transparent;
    }
    .pf-lb-stage video {
        position: absolute;
        inset: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        display: block;
        background: #000;
        object-fit: cover;
        opacity: 0;
        transition: opacity 0.22s ease;
    }
    .pf-lb-card.is-portrait-video {
        width: min(92vw, calc((100vh - 4rem) * var(--pf-ar, 0.5625)), 560px);
    }
    .pf-lb-stage.is-portrait {
        aspect-ratio: var(--pf-ar-w, 9) / var(--pf-ar-h, 16);
        width: 100%;
        max-height: calc(100vh - 4rem);
        margin: 0 auto;
    }
    .pf-lb-stage.is-portrait video {
        object-fit: contain;
    }
    .pf-lb-stage.is-portrait .pf-lb-poster {
        background-size: contain;
        background-color: #000;
    }
    .pf-lb-image {
        display: none;
        max-width: min(92vw, 980px);
        max-height: calc(100vh - 3rem);
        width: auto;
        height: auto;
        border-radius: 22px;
    }
    .pf-lb-card.is-image-mode .pf-lb-image {
        display: block;
    }
    .pf-lb-card.is-image-mode .pf-lb-poster,
    .pf-lb-card.is-image-mode #pfLbVideo,
    .pf-lb-card.is-image-mode #pfLbDemo,
    .pf-lb-card.is-image-mode #pfLbBig,
    .pf-lb-card.is-image-mode .pf-lb-bar {
        display: none;
    }
    .pf-lb-poster {
        position: absolute;
        inset: 0;
        z-index: 2;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        transition: opacity 0.22s ease;
    }
    .pf-lb-poster.is-image {
        background-size: contain;
    }
    .pf-lb-poster.is-hidden {
        opacity: 0;
        pointer-events: none;
    }
    .pf-lb-poster.is-image::after {
        display: none;
    }
    .pf-lb-poster::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.55));
    }
    .pf-lb-bigplay {
        position: absolute;
        inset: 0;
        z-index: 3;
        display: grid;
        place-items: center;
        border: 0;
        background: transparent;
        cursor: pointer;
    }
    .pf-lb-bigplay .play-btn {
        width: 84px;
        height: 84px;
    }
    .pf-lb-bigplay .play-btn i {
        font-size: 2.1rem;
    }
    .pf-lb-demo {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.9rem;
        padding: 1.5rem;
        color: #fff;
        text-align: center;
    }
    .pf-lb-demo.show {
        display: flex;
    }
    .pf-lb-demo .ring {
        width: 74px;
        height: 74px;
        border: 4px solid rgba(255, 255, 255, 0.2);
        border-top-color: var(--pf-orange);
        border-radius: 50%;
        animation: pfspin 1s linear infinite;
    }
    @keyframes pfspin {
        to {
            transform: rotate(360deg);
        }
    }
    .pf-lb-demo .note {
        font-family: var(--pf-head-font);
        font-size: 1.02rem;
        font-weight: 800;
    }
    .pf-lb-demo .path {
        border-radius: 7px;
        padding: 0.3rem 0.6rem;
        background: rgba(255, 255, 255, 0.08);
        color: #ffd2a6;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 0.8rem;
    }
    .pf-lb-bar {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 4;
        height: 4px;
        background: rgba(255, 255, 255, 0.18);
    }
    .pf-lb-bar i {
        display: block;
        height: 100%;
        width: 0;
        background: var(--pf-orange);
    }
    .pf-lb-close {
        position: absolute;
        top: 0.7rem;
        right: 0.7rem;
        z-index: 6;
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.45);
        color: #fff;
        cursor: pointer;
        font-size: 1.2rem;
        transition: 0.18s ease;
    }
    .pf-lb-close:hover {
        transform: rotate(90deg);
        background: rgba(0, 0, 0, 0.7);
    }
    @media (max-width: 992px) {
        .pf-slider {
            padding-inline: 0;
        }
        .pf-feature {
            grid-template-columns: 1fr;
            height: auto;
        }
        .pf-feature .side > * {
            height: auto;
        }
        .pf .vcard--hero {
            height: auto;
        }
        .pf .vcard--hero .poster {
            min-height: 240px;
        }
        .pf .vcard--side .poster {
            height: auto;
            min-height: 180px;
        }
        .pf-bento {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: none;
            grid-template-areas:
                "hero hero"
                "b c"
                "d e"
                "f f";
            height: auto;
        }
        .pf-bento .ba {
            min-height: 320px;
        }
        .pf-bento > * {
            min-height: 230px;
        }
        .pf-bento .bf {
            min-height: 0;
        }
        .pf-bento--alt {
            grid-template-areas:
                "hero hero"
                "b c"
                "b e"
                "f f";
        }
        .pf-arrow {
            display: none;
        }
    }
    @media (max-width: 560px) {
        .pf-bento {
            grid-template-columns: 1fr;
            grid-template-areas:
                "hero"
                "b"
                "c"
                "d"
                "e"
                "f";
        }
        .pf-bento--alt {
            grid-template-areas:
                "hero"
                "b"
                "c"
                "e"
                "f";
        }
    }
    #section-video-testimonials [data-pf-reveal] {
        opacity: 0;
        transform: translateY(22px);
        transition:
            opacity 0.75s ease-out,
            transform 0.75s ease-out;
        transition-delay: var(--pf-reveal-delay, 0ms);
        will-change: opacity, transform;
    }
    #section-video-testimonials .pf-reveal--0 {
        --pf-reveal-delay: 0ms;
    }
    #section-video-testimonials .pf-reveal--100 {
        --pf-reveal-delay: 100ms;
    }
    #section-video-testimonials [data-pf-reveal].is-in {
        opacity: 1;
        transform: none;
    }
    @media (prefers-reduced-motion: reduce) {
        #section-video-testimonials [data-pf-reveal] {
            opacity: 1;
            transform: none;
            transition: none;
        }
    }