.oc3dw-hero {
    --oc3dw-ink: #f7f4ec;
    --oc3dw-muted: rgba(247, 244, 236, 0.72);
    --oc3dw-accent: #d9e8ff;
    color: var(--oc3dw-ink);
    font-family: inherit;
    min-height: clamp(680px, 94vh, 980px);
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

.oc3dw-hero::before {
    background: var(--oc3dw-fabric-bg) center / cover no-repeat;
    content: "";
    inset: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 64%, rgba(0, 0, 0, 0.98) 69%, rgba(0, 0, 0, 0.78) 79%, rgba(0, 0, 0, 0.34) 91%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 64%, rgba(0, 0, 0, 0.98) 69%, rgba(0, 0, 0, 0.78) 79%, rgba(0, 0, 0, 0.34) 91%, transparent 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    opacity: 0.95;
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

.oc3dw-hero::after {
    background:
        radial-gradient(ellipse at 21% 10%, rgba(5, 9, 20, 0.28), transparent 58%),
        radial-gradient(ellipse at 76% 20%, rgba(5, 9, 20, 0.2), transparent 62%),
        radial-gradient(ellipse at 49% 0%, rgba(15, 33, 73, 0.16), transparent 54%),
        radial-gradient(ellipse at 28% 82%, rgba(15, 33, 73, 0.18), transparent 46%),
        radial-gradient(ellipse at 72% 88%, rgba(3, 6, 14, 0.16), transparent 50%);
    content: "";
    filter: blur(30px);
    inset: 18vh -12vw 8vh;
    opacity: 0.18;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

.oc3dw-stage {
    display: grid;
    grid-template-rows: minmax(430px, 64vh) auto;
    min-height: inherit;
    padding: clamp(28px, 5vh, 54px) 0 clamp(28px, 5vh, 48px);
    position: relative;
    z-index: 2;
}

.oc3dw-ribbon-stage {
    cursor: grab;
    min-height: 0;
    position: relative;
    touch-action: pan-y;
    z-index: 2;
}

.oc3dw-ribbon-stage.is-dragging {
    cursor: grabbing;
}

.oc3dw-ribbon-stage canvas {
    display: block;
    height: 100%;
    width: 100%;
}

.oc3dw-center {
    align-items: center;
    direction: rtl;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: start;
    margin: 0 auto;
    max-width: min(900px, calc(100vw - 40px));
    padding-top: var(--oc3dw-orbit-content-gap, 8px);
    position: relative;
    text-align: center;
    z-index: 3;
}

.oc3dw-active-title {
    color: var(--oc3dw-title-color, var(--oc3dw-ink));
    font-family: var(--oc3dw-title-font, inherit);
    font-size: var(--oc3dw-title-size, clamp(23px, 3vw, 40px));
    font-weight: 700;
    letter-spacing: 0;
    line-height: var(--oc3dw-title-line-height, 1.12);
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 1450ms cubic-bezier(0.16, 1, 0.3, 1), transform 1450ms cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    width: 100%;
}

.oc3dw-active-excerpt {
    color: var(--oc3dw-tagline-color, var(--oc3dw-muted));
    font-family: var(--oc3dw-tagline-font, inherit);
    font-size: var(--oc3dw-tagline-size, 15px);
    line-height: var(--oc3dw-tagline-line-height, 1.55);
    margin: 0;
    max-width: 760px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 1450ms cubic-bezier(0.16, 1, 0.3, 1) 90ms, transform 1450ms cubic-bezier(0.16, 1, 0.3, 1) 90ms;
    white-space: nowrap;
    width: 100%;
}

.oc3dw-read {
    align-items: center;
    background: var(--oc3dw-button-bg-color, #f7f4ec);
    border: 1px solid var(--oc3dw-button-border-color, #f7f4ec);
    border-radius: var(--oc3dw-button-radius, 4px);
    color: var(--oc3dw-button-text-color, #07101f);
    display: inline-flex;
    font-family: var(--oc3dw-button-font, inherit);
    font-size: var(--oc3dw-button-size, 14px);
    font-weight: 750;
    justify-content: center;
    line-height: var(--oc3dw-button-line-height, 1.2);
    min-height: 40px;
    padding: 10px 18px;
    text-decoration: none;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, opacity 1450ms cubic-bezier(0.16, 1, 0.3, 1) 160ms, transform 1450ms cubic-bezier(0.16, 1, 0.3, 1) 160ms;
    white-space: nowrap;
}

.oc3dw-read:hover,
.oc3dw-read:focus-visible {
    background: var(--oc3dw-button-hover-bg-color, #d9e8ff);
    border-color: var(--oc3dw-button-hover-border-color, #d9e8ff);
    color: var(--oc3dw-button-hover-text-color, #07101f);
    outline: none;
}

.oc3dw-read:focus-visible,
.oc3dw-fallback-links a:focus-visible {
    outline: 3px solid var(--oc3dw-accent);
    outline-offset: 5px;
}

.oc3dw-hero.is-loading .oc3dw-ribbon-stage,
.oc3dw-hero.is-loading .oc3dw-active-title,
.oc3dw-hero.is-loading .oc3dw-active-excerpt,
.oc3dw-hero.is-loading .oc3dw-read {
    opacity: 0;
    visibility: hidden;
}

.oc3dw-hero.is-ready .oc3dw-ribbon-stage {
    opacity: 1;
    visibility: visible;
}

.oc3dw-hero:not(.is-content-ready) .oc3dw-active-title,
.oc3dw-hero:not(.is-content-ready) .oc3dw-active-excerpt,
.oc3dw-hero:not(.is-content-ready) .oc3dw-read {
    opacity: 0;
    transform: translateY(16px);
}

.oc3dw-hero.is-content-ready .oc3dw-active-title,
.oc3dw-hero.is-content-ready .oc3dw-active-excerpt,
.oc3dw-hero.is-content-ready .oc3dw-read {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.oc3dw-fallback-links {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.oc3dw-empty {
    border: 1px solid #d8d8d8;
    padding: 16px;
}

@media (max-width: 700px) {
    .oc3dw-hero {
        min-height: 780px;
    }

    .oc3dw-stage {
        grid-template-rows: minmax(430px, 62vh) auto;
        padding-top: 24px;
    }

    .oc3dw-center {
        gap: 10px;
        padding-inline: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .oc3dw-active-title,
    .oc3dw-active-excerpt,
    .oc3dw-read {
        transition-duration: 180ms;
    }
}