/* JostPay Modern Homepage — isolated design */
.jm-home {
    --jm-green:#087b43;
    --jm-deep:#062f22;
    --jm-ink:#12261e;
    --jm-muted:#64746c;
    color:var(--jm-ink);
    background:#fff;
    font-family:Inter,Arial,sans-serif;
    overflow:hidden;
}
.jm-home * {box-sizing:border-box}
.jm-home a {text-decoration:none}
.jm-wrap {width:min(1240px,calc(100% - 48px));margin:auto}
.jm-section-index {
    font-size:12px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
}
.jm-hero {
    background:radial-gradient(circle at 50% 72%,#dff5e8 0%,#f5fbf7 45%,#fff 80%);
    padding:110px 0 48px;
}
.jm-hero-top {max-width:1120px;margin:auto;text-align:center}
.jm-kicker {
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#087b43;
    font-size:12px;
    font-weight:800;
    letter-spacing:.12em;
}
.jm-dot {width:9px;height:9px;border-radius:50%;background:#0caa5e}
.jm-hero h1 {
    font-size:clamp(48px,7.4vw,104px);
    line-height:1.02;
    font-weight:850;
    letter-spacing:-.07em;
    margin:30px 0;
}
.jm-hero h1 em,.jm-app-copy h2 em,.jm-final-cta h2 em {
    font-style:normal;
    color:var(--jm-green);
}
.jm-hero-bottom {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:36px;
    flex-wrap:wrap;
    margin-bottom:55px;
}
.jm-hero-bottom p {
    max-width:500px;
    text-align:left;
    color:var(--jm-muted);
    font-size:17px;
    line-height:1.75;
}
.jm-buttons {display:flex;gap:12px;flex-wrap:wrap}
.jm-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    padding:16px 24px;
    border-radius:100px;
    font-size:14px;
    font-weight:750;
    transition:transform .2s,background .2s;
}
.jm-button:hover {transform:translateY(-3px)}
.jm-primary {background:var(--jm-green);color:#fff!important}
.jm-secondary {border:1px solid #b8d3c2;color:var(--jm-ink)!important;background:#fff}
.jm-hero-stage {
    border-radius:32px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 35px 100px rgba(5,61,35,.10);
}
.jm-hero-stage img {display:block;width:100%;height:auto}
.jm-hero-caption {
    display:flex;
    justify-content:space-between;
    gap:15px;
    margin-top:24px;
    font-size:10px;
    font-weight:800;
    letter-spacing:.15em;
    color:#769083;
}
.jm-intro {padding:110px 0;border-bottom:1px solid #e5eee8}
.jm-intro-grid {display:grid;grid-template-columns:1fr 2fr;gap:50px}
.jm-intro h2,.jm-section-heading h2 {
    font-size:clamp(40px,5vw,70px);
    line-height:1.08;
    font-weight:850;
    letter-spacing:-.055em;
    margin:16px 0;
}
.jm-intro h2 span,.jm-section-heading h2 span {color:var(--jm-green)}
.jm-intro p {
    color:var(--jm-muted);
    font-size:18px;
    line-height:1.8;
    max-width:650px;
}
.jm-services-section {padding:105px 0;background:#f7faf8}
.jm-section-heading {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:35px;
    margin-bottom:46px;
}
.jm-section-heading>p {
    max-width:350px;
    color:var(--jm-muted);
    line-height:1.8;
}
.jm-services-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}
.jm-service-card {
    display:flex;
    flex-direction:column;
    min-height:350px;
    padding:25px;
    border:1px solid #e1eae4;
    border-radius:24px;
    background:#fff;
    color:var(--jm-ink)!important;
    transition:transform .25s,box-shadow .25s;
}
.jm-service-card:hover {
    transform:translateY(-5px);
    box-shadow:0 24px 50px rgba(6,47,34,.10);
}
.jm-service-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#829489;
    font-size:10px;
    font-weight:800;
    letter-spacing:.12em;
}
.jm-card-arrow {
    display:grid;
    place-items:center;
    width:35px;
    height:35px;
    border:1px solid #dbe9df;
    border-radius:50%;
    color:var(--jm-green);
    font-size:18px;
}
.jm-service-art {
    display:grid;
    place-items:center;
    flex:1;
    min-height:150px;
    margin:8px 0;
}
.jm-service-art img {
    width:125px;
    height:125px;
    object-fit:contain;
}
.jm-service-content h3 {font-size:21px;font-weight:800;margin:0 0 8px}
.jm-service-content p {font-size:14px;color:var(--jm-muted);line-height:1.65;margin:0}
.jm-featured-card {background:#e7f5eb}
.jm-featured-card .jm-service-art img {width:165px;height:165px}
.jm-promo-section {padding:50px 0}
.jm-promo-panel {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    align-items:center;
    padding:45px;
    border-radius:26px;
    background:#e8f6ec;
}
.jm-promo-panel h2 {font-size:36px;font-weight:850;margin:15px 0}
.jm-promo-panel p {line-height:1.8;color:#52675b}
.jm-promo-panel img {max-width:100%;max-height:300px;object-fit:contain}
.jm-app-section {
    background:#063c2a;
    color:#fff;
    padding:100px 0;
    overflow:hidden;
}
.jm-app-grid {display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.jm-app-copy h2 {
    font-size:clamp(48px,5.4vw,78px);
    font-weight:850;
    letter-spacing:-.06em;
    line-height:1.08;
    margin:25px 0;
}
.jm-app-copy h2 em {color:#7ee2a5}
.jm-app-copy p {color:#c6ded0;line-height:1.8;font-size:17px;max-width:470px}
.jm-app-copy .jm-buttons {margin-top:32px}
.jm-white {background:#fff;color:#063c2a!important}
.jm-green-outline {border:1px solid #80b59b;color:#fff!important}
.jm-app-art {display:flex;align-items:center;justify-content:center;gap:15px}
.jm-app-art img {width:46%;max-width:280px;height:auto;filter:drop-shadow(0 20px 30px rgba(0,0,0,.22))}
.jm-phone-two {transform:translateY(35px)}
.jm-instagram-section {padding:110px 0}
.jm-instagram-link {font-weight:800;color:var(--jm-green)!important}
.jm-instagram-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.jm-instagram-card {position:relative;aspect-ratio:1;overflow:hidden;border-radius:20px;background:#e6f1e9}
.jm-instagram-card img {width:100%;height:100%;object-fit:cover;transition:transform .3s}
.jm-instagram-card:hover img {transform:scale(1.05)}
.jm-instagram-overlay {
    position:absolute;
    inset:auto 0 0;
    padding:35px 20px 20px;
    background:linear-gradient(transparent,rgba(0,0,0,.65));
    color:#fff;
    font-weight:800;
}
.jm-final-cta {padding:105px 0;text-align:center;background:#eaf6ed}
.jm-final-cta h2 {
    font-size:clamp(48px,6vw,86px);
    line-height:1.08;
    font-weight:850;
    letter-spacing:-.06em;
    margin:25px 0 35px;
}
@media(max-width:900px) {
    .jm-intro-grid,.jm-app-grid {grid-template-columns:1fr}
    .jm-services-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
    .jm-hero {padding-top:80px}
    .jm-hero-bottom p {text-align:center}
    .jm-section-heading {align-items:start;flex-direction:column}
}
@media(max-width:600px) {
    .jm-wrap {width:calc(100% - 30px)}
    .jm-hero {padding:55px 0 30px}
    .jm-hero h1 {font-size:clamp(43px,10vw,62px)}
    .jm-hero-stage {border-radius:18px}
    .jm-hero-bottom {gap:18px;margin-bottom:35px}
    .jm-hero-caption {font-size:8px}
    .jm-intro,.jm-services-section,.jm-instagram-section {padding:65px 0}
    .jm-services-grid {grid-template-columns:1fr}
    .jm-service-card {min-height:300px}
    .jm-app-section {padding:70px 0}
    .jm-app-grid {gap:30px}
    .jm-app-art img {width:47%}
    .jm-instagram-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .jm-promo-panel {grid-template-columns:1fr;padding:25px}
    .jm-final-cta {padding:70px 0}
}
@media(prefers-reduced-motion:reduce) {
    .jm-home * {transition:none!important}
}


/* JOSTPAY HERO V2 */

/* Deep-green hero */
.jm-home .jm-hero {
    background:
        radial-gradient(
            ellipse at 70% 35%,
            rgba(27, 150, 86, .30),
            transparent 55%
        ),
        linear-gradient(
            145deg,
            #04291d 0%,
            #06432d 55%,
            #075737 100%
        );
    color: #ffffff;
    padding-top: 105px;
    padding-bottom: 75px;
}

/* Headline */
.jm-home .jm-hero h1 {
    color: #ffffff;
    animation: jmRevealUp .85s ease-out both;
}

.jm-home .jm-hero h1 em {
    color: #7ee7a8;
}

/* Eyebrow */
.jm-home .jm-kicker {
    color: #b7efcd;
    animation: jmRevealUp .65s ease-out both;
}

/* Description */
.jm-home .jm-hero-bottom p {
    color: #d0e8d9;
    animation: jmRevealUp .9s .15s ease-out both;
}

/* Buttons */
.jm-home .jm-hero .jm-buttons {
    animation: jmRevealUp .9s .25s ease-out both;
}

.jm-home .jm-hero .jm-primary {
    background: #24b96c;
    color: #ffffff !important;
}

.jm-home .jm-hero .jm-primary:hover {
    background: #31cb7b;
}

.jm-home .jm-hero .jm-secondary {
    background: transparent;
    border-color: rgba(255,255,255,.45);
    color: #ffffff !important;
}

.jm-home .jm-hero .jm-secondary:hover {
    background: rgba(255,255,255,.10);
}

/* Device composition */
.jm-home .jm-hero-stage {
    background: #ffffff;
    box-shadow: 0 35px 100px rgba(0,0,0,.22);
    animation: jmDeviceReveal 1.15s .35s ease-out both;
}

/* Bottom captions */
.jm-home .jm-hero-caption {
    color: #b3dcc4;
}

/* Smooth entrance */
@keyframes jmRevealUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes jmDeviceReveal {
    from {
        opacity: 0;
        transform: translateY(38px) scale(.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Mobile */
@media (max-width: 600px) {
    .jm-home .jm-hero {
        padding-top: 65px;
        padding-bottom: 50px;
    }

    .jm-home .jm-hero h1 {
        font-size: clamp(40px, 10vw, 62px);
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .jm-home .jm-hero h1,
    .jm-home .jm-kicker,
    .jm-home .jm-hero-bottom p,
    .jm-home .jm-hero .jm-buttons,
    .jm-home .jm-hero-stage {
        animation: none !important;
    }
}


/* JOSTPAY HERO V3 */

/* Blend premium artwork into the green hero */
.jm-home .jm-hero-stage {
    background: transparent;
    box-shadow: none;
    border-radius: 24px;
    overflow: hidden;
}

.jm-home .jm-hero-stage img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Keep device composition visually prominent */
.jm-home .jm-hero-stage {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive artwork */
@media (max-width: 600px) {
    .jm-home .jm-hero-stage {
        border-radius: 14px;
    }
}


/* JOSTPAY SERVICES V2 */

.jm-service-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 34px;
}

.jm-filter {
    appearance: none;
    border: 1px solid #d8e7dd;
    background: #ffffff;
    color: #375345;
    padding: 12px 20px;
    border-radius: 100px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}

.jm-filter:hover {
    border-color: #087b43;
    color: #087b43;
}

.jm-filter.active {
    background: #087b43;
    border-color: #087b43;
    color: #ffffff;
}

.jm-home .jm-service-card[hidden],
.jm-home .jm-view-all[hidden] {
    display: none !important;
}

.jm-services-actions {
    display: flex;
    justify-content: center;
    margin-top: 38px;
}

.jm-view-all {
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.jm-filter:focus-visible,
.jm-view-all:focus-visible {
    outline: 3px solid #24b96c;
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .jm-service-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 12px;
        margin-bottom: 24px;
        scrollbar-width: thin;
    }

    .jm-filter {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 11px 16px;
        font-size: 12px;
    }
}


/* JOSTPAY HERO V4 — WEB + MOBILE DOWNLOADS */

.jm-home .jm-hero-action-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.jm-home .jm-hero-downloads {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jm-home .jm-download-label {
    color: #bcebd1;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.jm-home .jm-store-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.jm-home .jm-store-button {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: 166px;
    padding: 10px 16px;
    border: 1px solid rgba(255,255,255,.23);
    border-radius: 12px;
    background: #101713;
    color: #fff;
    text-decoration: none;
    transition: transform .2s, background .2s;
}

.jm-home .jm-store-button:hover {
    transform: translateY(-3px);
    background: #1c2821;
}

.jm-home .jm-store-icon {
    font-size: 29px;
    line-height: 1;
    font-family: Arial, sans-serif;
}

.jm-home .jm-store-button span:not(.jm-store-icon) {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.jm-home .jm-store-button small {
    font-size: 10px;
}

.jm-home .jm-store-button strong {
    font-size: 17px;
    font-weight: 750;
}

.jm-home .jm-store-button:focus-visible {
    outline: 3px solid #a7edbf;
    outline-offset: 4px;
}

.jm-home .jm-hero-stage {
    margin-top: 35px;
}

@media (max-width: 900px) {
    .jm-home .jm-hero-action-group,
    .jm-home .jm-hero-downloads {
        align-items: center;
    }

    .jm-home .jm-store-buttons {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .jm-home .jm-store-buttons {
        gap: 9px;
    }

    .jm-home .jm-store-button {
        min-width: 145px;
        padding: 10px 12px;
    }

    .jm-home .jm-store-button strong {
        font-size: 14px;
    }

    .jm-home .jm-hero-stage {
        margin-top: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jm-home .jm-store-button {
        transition: none;
    }
}


/* JOSTPAY HERO V5 — IMAGE DOWNLOAD POSITION */

.jm-home .jm-hero-stage {
    position: relative;
    overflow: visible;
    padding-bottom: 24px;
}

.jm-home .jm-hero-stage-downloads {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    z-index: 3;
    width: max-content;
    max-width: calc(100% - 24px);
    padding: 12px 18px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 18px;
    background: rgba(3,34,23,.88);
    box-shadow: 0 16px 45px rgba(0,0,0,.28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.jm-home .jm-hero-stage-downloads .jm-hero-downloads {
    align-items: center;
    gap: 10px;
}

.jm-home .jm-hero-stage-downloads .jm-store-buttons {
    justify-content: center;
}

.jm-home .jm-hero-stage-downloads .jm-download-label {
    text-align: center;
}

@media (max-width: 600px) {
    .jm-home .jm-hero-stage {
        padding-bottom: 0;
    }

    .jm-home .jm-hero-stage-downloads {
        position: relative;
        left: auto;
        bottom: auto;
        transform: none;
        width: 100%;
        max-width: 100%;
        margin: -10px auto 12px;
        padding: 14px 10px;
        box-sizing: border-box;
    }

    .jm-home .jm-hero-stage-downloads .jm-store-buttons {
        flex-wrap: wrap;
    }
}