.mrpsn-herobox,
.mrpsn-herobox * {
    box-sizing: border-box;
}

.mrpsn-herobox {
    --mrpsn-herobox-accent: var(--mrpsn-blue, #006fff);
    --mrpsn-herobox-text: var(--mrpsn-ink, #111827);
    --mrpsn-herobox-muted: var(--mrpsn-muted, #6b7280);
    --mrpsn-herobox-line: var(--mrpsn-line, rgba(15, 23, 42, .08));
    --mrpsn-herobox-soft: var(--mrpsn-surface-soft, #f8faff);

    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 100%;
    margin: 22px 0 20px;
    border: 1px solid var(--mrpsn-herobox-line);
    border-radius: var(--mrpsn-radius-lg, 22px);
    background: #fff;
    color: var(--mrpsn-herobox-text);
    overflow: hidden;
    box-shadow: none;
}

.mrpsn-herobox__viewport {
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;
}

.mrpsn-herobox__track {
    display: grid;
    width: 100%;
}

.mrpsn-herobox__slide {
    position: relative;
    z-index: 0;
    grid-area: 1 / 1;
    width: 100%;
    min-width: 0;
    direction: rtl;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 54%, rgba(var(--mrpsn-blue-rgb, 0, 111, 255), .09), transparent 29%),
        linear-gradient(90deg, #fff 0%, #fff 45%, var(--mrpsn-herobox-soft) 100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(-24px, 0, 0);
    transition:
        opacity .42s var(--mrpsn-ease, cubic-bezier(.2, .7, .2, 1)),
        transform .42s var(--mrpsn-ease, cubic-bezier(.2, .7, .2, 1)),
        visibility 0s linear .42s;
}

.mrpsn-herobox__slide.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
}

.mrpsn-herobox__slide--computer {
    background:
        radial-gradient(circle at 88% 20%, rgba(var(--mrpsn-blue-rgb, 0, 111, 255), .085), transparent 30%),
        linear-gradient(90deg, #fff 0%, #fff 42%, #f5f9ff 100%);
}

.mrpsn-herobox__slide--mobile {
    background:
        radial-gradient(circle at 18% 82%, rgba(var(--mrpsn-blue-rgb, 0, 111, 255), .085), transparent 32%),
        linear-gradient(90deg, #fff 0%, #fff 44%, #f7faff 100%);
}

.mrpsn-herobox__slide::after {
    position: absolute;
    inset: 20px 20px auto auto;
    width: 86px;
    height: 86px;
    content: "";
    pointer-events: none;
    border: 1px solid rgba(var(--mrpsn-blue-rgb, 0, 111, 255), .08);
    border-radius: var(--mrpsn-radius-lg, 22px);
    transform: rotate(10deg);
}

.mrpsn-herobox__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr);
    align-items: center;
    width: min(100%, var(--mrpsn-container-wide, 1360px));
    min-height: 338px;
    margin-inline: auto;
    padding: 36px clamp(28px, 4vw, 58px) 42px;
}

.mrpsn-herobox__content {
    position: relative;
    z-index: 2;
    max-width: 590px;
}

.mrpsn-herobox__eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--mrpsn-herobox-accent);
    font-size: var(--mrpsn-font-sm, 12px);
    font-weight: var(--mrpsn-weight-bold, 700);
    line-height: 1.7;
}

.mrpsn-herobox__title {
    margin: 0;
    color: var(--mrpsn-herobox-text);
    font-family: inherit;
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: -.028em;
}

.mrpsn-herobox__highlight {
    color: var(--mrpsn-herobox-accent);
    white-space: nowrap;
}

.mrpsn-herobox__subtitle {
    max-width: 545px;
    margin: 15px 0 0;
    color: var(--mrpsn-herobox-muted);
    font-size: clamp(.94rem, 1.05vw, 1rem);
    font-weight: var(--mrpsn-weight-regular, 400);
    line-height: 1.95;
}

.mrpsn-herobox__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.mrpsn-herobox__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--mrpsn-control-md, 42px);
    padding: 9px 18px;
    border: 1px solid transparent;
    border-radius: var(--mrpsn-radius-sm, 12px);
    font: inherit;
    font-size: .92rem;
    font-weight: 750;
    line-height: 1.35;
    text-decoration: none !important;
    box-shadow: none;
    transition:
        color var(--mrpsn-dur-fast, .16s) ease,
        background-color var(--mrpsn-dur-fast, .16s) ease,
        border-color var(--mrpsn-dur-fast, .16s) ease,
        transform var(--mrpsn-dur-fast, .16s) ease;
}

.mrpsn-herobox__button--primary {
    border-color: var(--mrpsn-herobox-accent);
    background: var(--mrpsn-herobox-accent);
    color: #fff !important;
}

.mrpsn-herobox__button--secondary {
    border-color: var(--mrpsn-line-strong, rgba(15, 23, 42, .14));
    background: #fff;
    color: var(--mrpsn-herobox-text) !important;
}

.mrpsn-herobox__button:focus-visible,
.mrpsn-herobox__arrow:focus-visible,
.mrpsn-herobox__dot:focus-visible {
    outline: 2px solid var(--mrpsn-herobox-accent);
    outline-offset: 3px;
}

.mrpsn-herobox__visual {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    align-self: end;
}

.mrpsn-herobox__glow {
    position: absolute;
    z-index: -1;
    width: min(76%, 430px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--mrpsn-blue-rgb, 0, 111, 255), .11), transparent 68%);
}

.mrpsn-herobox__image {
    display: block;
    width: min(100%, 430px);
    height: auto;
    margin: 0 auto -4px;
    object-fit: contain;
}

.mrpsn-herobox__navigation {
    position: absolute;
    z-index: 5;
    inset: auto 0 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    pointer-events: none;
}

.mrpsn-herobox__arrow,
.mrpsn-herobox__dot {
    pointer-events: auto;
    appearance: none;
    border: 0;
    box-shadow: none;
    cursor: pointer;
}

.mrpsn-herobox__arrow {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--mrpsn-herobox-line);
    border-radius: var(--mrpsn-radius-sm, 12px);
    background: rgba(255, 255, 255, .94);
    color: var(--mrpsn-text-soft, #475569);
    transition:
        color var(--mrpsn-dur-fast, .16s) ease,
        border-color var(--mrpsn-dur-fast, .16s) ease,
        background-color var(--mrpsn-dur-fast, .16s) ease;
}

.mrpsn-herobox__control-icon {
    display: block;
    width: 17px;
    height: 17px;
}

.mrpsn-herobox__dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

.mrpsn-herobox__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border-radius: var(--mrpsn-radius-pill, 999px);
    background: rgba(15, 23, 42, .18);
    transition:
        width var(--mrpsn-dur-base, .22s) ease,
        background-color var(--mrpsn-dur-base, .22s) ease;
}

.mrpsn-herobox__dot.is-active {
    width: 24px;
    background: var(--mrpsn-herobox-accent);
}

@media (hover: hover) and (pointer: fine) {
    .mrpsn-herobox__button:hover {
        transform: translateY(-1px);
    }

    .mrpsn-herobox__button--primary:hover {
        border-color: var(--mrpsn-blue-dark, #0059d6);
        background: var(--mrpsn-blue-dark, #0059d6);
    }

    .mrpsn-herobox__button--secondary:hover,
    .mrpsn-herobox__arrow:hover {
        border-color: var(--mrpsn-line-blue, rgba(0, 111, 255, .22));
        background: var(--mrpsn-herobox-soft);
        color: var(--mrpsn-herobox-accent);
    }
}

@media (max-width: 1024px) {
    .mrpsn-herobox__inner {
        grid-template-columns: minmax(0, 1fr) minmax(310px, .9fr);
        min-height: 315px;
        padding: 30px 30px 40px;
    }

    .mrpsn-herobox__title {
        font-size: clamp(1.85rem, 4vw, 2.55rem);
    }
}

@media (max-width: 767px) {
    .mrpsn-herobox {
        margin: 14px 0 18px;
        border-radius: var(--mrpsn-radius-md, 16px);
    }

    .mrpsn-herobox__slide,
    .mrpsn-herobox__slide--computer,
    .mrpsn-herobox__slide--mobile {
        background:
            radial-gradient(circle at 50% 84%, rgba(var(--mrpsn-blue-rgb, 0, 111, 255), .1), transparent 38%),
            linear-gradient(180deg, #fff 0%, #f7faff 100%);
    }

    .mrpsn-herobox__slide::after {
        display: none;
    }

    .mrpsn-herobox__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        min-height: 0;
        padding: 24px 18px 45px;
        text-align: center;
    }

    .mrpsn-herobox__content {
        max-width: 610px;
        margin-inline: auto;
    }

    .mrpsn-herobox__eyebrow {
        margin-bottom: 7px;
        font-size: 11px;
    }

    .mrpsn-herobox__title {
        font-size: clamp(1.68rem, 7.6vw, 2.15rem);
        line-height: 1.38;
        letter-spacing: -.02em;
    }

    .mrpsn-herobox__subtitle {
        max-width: 520px;
        margin: 12px auto 0;
        font-size: .92rem;
        line-height: 1.85;
    }

    .mrpsn-herobox__actions {
        justify-content: center;
        margin-top: 17px;
    }

    .mrpsn-herobox__visual {
        margin-top: 2px;
    }

    .mrpsn-herobox__image {
        width: min(100%, 500px);
        margin-bottom: -2px;
    }

    .mrpsn-herobox__navigation {
        bottom: 10px;
    }
}

@media (max-width: 430px) {
    .mrpsn-herobox__inner {
        padding-inline: 15px;
    }

    .mrpsn-herobox__actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .mrpsn-herobox__button {
        width: 100%;
    }

    .mrpsn-herobox__image {
        width: calc(100% + 8px);
        max-width: none;
        margin-inline: -4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mrpsn-herobox__slide,
    .mrpsn-herobox__button,
    .mrpsn-herobox__arrow,
    .mrpsn-herobox__dot {
        transition: none !important;
    }
}