:root{
    /* JP.BOOTH official color base: orange, white, gray, black */
    --jp-orange:#cf5d18;
    --jp-orange-dark:#a9460f;
    --jp-orange-soft:#fff2ea;
    --jp-white:#ffffff;
    --jp-gray:#4b4744;
    --jp-gray-soft:#f6f5f3;
    --jp-black:#090909;

    --jp-bg:var(--jp-white);
    --jp-bg-soft:var(--jp-gray-soft);
    --jp-card:var(--jp-white);
    --jp-text:#171717;
    --jp-muted:#6b6b6b;
    --jp-line:#e7e2de;
    --jp-dark:var(--jp-black);

    /* Alias lama agar class/section lama tetap aman */
    --jp-gold:var(--jp-orange);
    --jp-gold-soft:var(--jp-orange-soft);

    --jp-radius:24px;
    --jp-radius-sm:14px;
    --jp-shadow:0 18px 50px rgba(0,0,0,.08);
    --jp-container:1160px;
    --jp-font:'Poppins',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:var(--jp-font);
    color:var(--jp-text);
    background:var(--jp-bg);
    line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.jp-container{width:min(var(--jp-container),calc(100% - 40px));margin-inline:auto}
.jp-section{padding:86px 0}
.jp-section-soft{background:var(--jp-bg-soft)}
.jp-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--jp-orange)}
.jp-title{font-size:clamp(32px,5vw,58px);line-height:1.05;margin:12px 0 16px;letter-spacing:-.04em}
.jp-section-title{font-size:clamp(28px,4vw,44px);line-height:1.1;margin:10px 0 14px;letter-spacing:-.035em}
.jp-lead{font-size:clamp(16px,2vw,20px);color:var(--jp-muted);max-width:760px;margin:0}
.jp-grid{display:grid;gap:22px}
.jp-card{background:var(--jp-card);border:1px solid var(--jp-line);border-radius:var(--jp-radius);box-shadow:var(--jp-shadow);padding:26px}
.jp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:14px 22px;font-weight:800;border:1px solid transparent;transition:.2s ease;cursor:pointer;font-family:inherit}
.jp-btn:hover{transform:translateY(-2px)}
.jp-btn-dark{background:var(--jp-dark);color:#fff}
.jp-btn-light{background:#fff;color:var(--jp-dark);border-color:var(--jp-line)}
.jp-btn-orange,.jp-btn-gold{background:var(--jp-orange);color:#fff}
.jp-input,.jp-select,.jp-textarea{width:100%;border:1px solid var(--jp-line);border-radius:16px;padding:14px 16px;font-family:inherit;font-size:15px;background:#fff;color:var(--jp-text);outline:none}
.jp-input:focus,.jp-select:focus,.jp-textarea:focus{border-color:var(--jp-orange);box-shadow:0 0 0 4px rgba(207,93,24,.15)}
.jp-navbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;justify-content:space-between;padding:14px 28px;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-bottom:1px solid var(--jp-line)}
.jp-brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:-.03em}
.jp-brand-logo{height:42px;width:auto;max-width:190px;object-fit:contain}
.jp-brand-mark{width:38px;height:38px;border-radius:13px;background:var(--jp-orange);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:900}
.jp-nav-links{display:flex;align-items:center;gap:24px;color:var(--jp-muted);font-weight:700;font-size:14px}
.jp-nav-links a:hover{color:var(--jp-orange)}
.jp-menu-btn{display:none;background:#fff;border:1px solid var(--jp-line);border-radius:12px;width:42px;height:42px;font-size:20px}
.jp-footer{padding:34px 0;background:var(--jp-dark);color:#fff}
.jp-footer-inner{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:rgba(255,255,255,.8);font-size:14px}
.jp-footer p{margin:0}
@media(max-width:820px){
    .jp-section{padding:64px 0}
    .jp-navbar{padding:12px 18px}
    .jp-brand-logo{height:36px;max-width:150px}
    .jp-nav-links{display:none;position:absolute;top:66px;left:18px;right:18px;background:#fff;border:1px solid var(--jp-line);border-radius:20px;padding:18px;box-shadow:var(--jp-shadow);flex-direction:column;align-items:flex-start}
    .jp-nav-links.is-open{display:flex}
    .jp-nav-cta{display:none}
    .jp-menu-btn{display:block}
}

/*########################################################## MENU ############################################################################# */
.jp-menu-tooltip{
    position:absolute;
    right:68px;
    top:50%;
    transform:translateY(-50%) translateX(8px);
    background:var(--jp-dark);
    color:#fff;
    padding:10px 14px;
    border-radius:14px;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
    box-shadow:0 10px 30px rgba(0,0,0,.18);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.25s ease;
    z-index:60;
}

.jp-menu-tooltip::after{
    content:'';
    position:absolute;
    top:50%;
    right:-6px;
    width:12px;
    height:12px;
    background:var(--jp-dark);
    transform:translateY(-50%) rotate(45deg);
}

.jp-menu-tooltip.show{
    opacity:1;
    visibility:visible;
    transform:translateY(-50%) translateX(0);
    animation:jpTooltipBlink 1.1s ease-in-out infinite;
}

@keyframes jpTooltipBlink{
    0%,100%{
        opacity:1;
        transform:translateY(-50%) translateX(0) scale(1);
    }
    50%{
        opacity:.45;
        transform:translateY(-50%) translateX(-4px) scale(1.03);
    }
}

.jp-navbar{
    position:sticky;
    top:0;
    z-index:50;
    display:flex;
    align-items:center;
    padding:16px 28px;
    background:rgba(255,255,255,.86);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--jp-line);
    gap:24px;
}

.jp-brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    letter-spacing:-.03em;
    flex-shrink:0;
}

.jp-nav-links{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    color:var(--jp-muted);
    font-weight:600;
    font-size:14px;
    flex:1;
}

.jp-nav-cta{
    margin-left:auto;
    flex-shrink:0;
}

.jp-menu-wrap{
    position:relative;
    display:none;
    align-items:center;
    margin-left:auto;
    z-index:80;
}

.jp-menu-btn{
    background:#fff;
    border:1px solid var(--jp-line);
    border-radius:14px;
    width:46px;
    height:46px;
    font-size:24px;
    line-height:1;
    cursor:pointer;
    position:relative;
    z-index:90;
}

@media(max-width:820px){
    .jp-navbar{
        padding:12px 20px;
        gap:12px;
    }

    .jp-nav-cta{
        display:none !important;
    }

    .jp-menu-wrap{
        display:flex !important;
    }

    .jp-navbar .jp-nav-links{
        display:none !important;
        position:absolute;
        top:74px;
        left:18px;
        right:18px;
        flex:unset;
        flex-direction:column;
        align-items:center;
        gap:22px;
        padding:22px;
        background:#fff;
        border:1px solid var(--jp-line);
        border-radius:22px;
        box-shadow:var(--jp-shadow);
        z-index:70;
    }

    .jp-navbar .jp-nav-links.is-open{
        display:flex !important;
    }
}

@media(min-width:821px){
    .jp-menu-wrap{
        display:none !important;
    }
}

@media(max-width:820px){
    .jp-navbar{
        position:sticky;
        top:0;
        z-index:999;
    }

    .jp-navbar .jp-nav-links{
        display:none !important;
        position:fixed !important;
        top:86px !important;
        left:20px !important;
        right:20px !important;
        z-index:998 !important;

        flex-direction:column;
        align-items:flex-start;
        gap:24px;

        padding:22px 18px;
        background:#fff;
        border:1px solid var(--jp-line);
        border-radius:22px;
        box-shadow:var(--jp-shadow);
    }

    .jp-navbar .jp-nav-links.is-open{
        display:flex !important;
    }
}