@property --hero-orbit-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.hero-cube-carousel {
    --hero-gold: #d8ae45;
    --hero-emerald: #087052;
    --hero-duration: 7s;
    isolation: isolate;
}

.hero-cube-carousel .carousel-inner {
    perspective: 1800px;
    transform-style: preserve-3d;
    background: #031d17;
}

.hero-cube-carousel .carousel-item {
    display: block;
    float: none;
    position: absolute !important;
    inset: 0;
    width: 100%;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: rotateY(0) scale(.985);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: transform .95s cubic-bezier(.72, 0, .18, 1), opacity .55s ease, visibility .95s;
}

.hero-cube-carousel .carousel-item.active,
.hero-cube-carousel .carousel-item-next,
.hero-cube-carousel .carousel-item-prev {
    visibility: visible;
}

.hero-cube-carousel .carousel-item.active {
    position: relative !important;
    opacity: 1;
    z-index: 2;
    transform: none;
}

.hero-cube-carousel .carousel-item.active .carousel-caption,
.hero-cube-carousel .carousel-item.active .hero-copy {
    transform: none;
    filter: none;
    backface-visibility: visible;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

.hero-cube-carousel .hero-title {
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: -.035em;
    text-shadow: 0 2px 3px rgba(0, 0, 0, .42);
    font-family: Poppins, "Open Sans", sans-serif;
}

.hero-cube-carousel .hero-subtitle {
    color: #fff !important;
    font-weight: 700;
    letter-spacing: .04em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .42);
}

.hero-cube-carousel .hero-text {
    color: rgba(255, 255, 255, .88) !important;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .38);
}

.hero-cube-carousel .carousel-item.active .hero-subtitle {
    animation: heroSharpIn .6s ease .12s forwards;
}

.hero-cube-carousel .carousel-item.active .hero-title {
    animation: heroSharpIn .7s ease .24s forwards;
}

.hero-cube-carousel .carousel-item.active .hero-text {
    animation: heroSharpIn .7s ease .38s forwards;
}

.hero-cube-carousel .carousel-item.active .hero-actions {
    animation: heroSharpIn .7s ease .52s forwards;
}

@keyframes heroSharpIn {
    from { opacity: 0; transform: none; }
    to { opacity: 1; transform: none; }
}

.hero-cube-carousel .carousel-caption {
    background:
        linear-gradient(0deg, #052f25 0, rgba(5, 47, 37, .72) 8%, rgba(5, 47, 37, .08) 38%, transparent 54%),
        linear-gradient(90deg, rgba(2, 20, 16, .94) 0%, rgba(6, 47, 37, .76) 43%, rgba(6, 47, 37, .3) 72%, rgba(6, 47, 37, .12) 100%) !important;
}

[dir="rtl"] .hero-cube-carousel .carousel-caption {
    background:
        linear-gradient(0deg, #052f25 0, rgba(5, 47, 37, .72) 8%, rgba(5, 47, 37, .08) 38%, transparent 54%),
        linear-gradient(270deg, rgba(2, 20, 16, .94) 0%, rgba(6, 47, 37, .76) 43%, rgba(6, 47, 37, .3) 72%, rgba(6, 47, 37, .12) 100%) !important;
}

.hero-cube-carousel.cube-to-next .carousel-item-next:not(.carousel-item-start) {
    opacity: .35;
    transform: rotateY(84deg) scale(.96);
    transform-origin: 0 50%;
}

.hero-cube-carousel.cube-to-next .active.carousel-item-start {
    opacity: 0;
    transform: rotateY(-84deg) scale(.96);
    transform-origin: 100% 50%;
}

.hero-cube-carousel.cube-to-prev .carousel-item-prev:not(.carousel-item-end) {
    opacity: .35;
    transform: rotateY(-84deg) scale(.96);
    transform-origin: 100% 50%;
}

.hero-cube-carousel.cube-to-prev .active.carousel-item-end {
    opacity: 0;
    transform: rotateY(84deg) scale(.96);
    transform-origin: 0 50%;
}

.hero-cube-carousel .carousel-item-next.carousel-item-start,
.hero-cube-carousel .carousel-item-prev.carousel-item-end {
    opacity: 1;
    transform: rotateY(0) scale(1);
}

.hero-cube-carousel .carousel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(90deg, #000, transparent 72%);
}

.hero-carousel-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 15;
    background: rgba(255,255,255,.12);
}

.hero-carousel-progress span {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, var(--hero-emerald), var(--hero-gold), #ffe49c);
    box-shadow: 0 0 18px rgba(216,174,69,.75);
}

.hero-carousel-progress span {
    animation: heroProgress var(--hero-duration) linear forwards;
}

.hero-page-navigation {
    position: relative;
    z-index: 12;
    width: 100%;
    min-height: 104px;
    display: grid;
    grid-template-columns: minmax(180px, .78fr) minmax(430px, 1.7fr) auto;
    align-items: center;
    gap: 26px;
    margin-top: -1px;
    padding: 15px max(7%, 28px);
    border: 0;
    border-top: 1px solid rgba(216, 174, 69, .24);
    border-radius: 0;
    background: linear-gradient(105deg, #052f25 0%, #063d2f 52%, #03251d 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 40px rgba(2, 24, 18, .15);
}

.hero-page-navigation::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -28px;
    height: 28px;
    pointer-events: none;
    background: linear-gradient(0deg, #052f25 0%, rgba(5, 47, 37, .68) 42%, transparent 100%);
}

.hero-page-status {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.hero-page-status > span {
    min-width: 52px;
    font: 700 2rem/1 Poppins, sans-serif;
    color: var(--hero-gold);
    letter-spacing: -.08em;
    font-size: 0;
}

.hero-page-status > span::after { content: "01"; font: 700 2rem/1 Poppins, sans-serif; }
.istiqama-hero:has(.carousel-item:nth-child(2).active) .hero-page-status > span::after { content: "02"; }
.istiqama-hero:has(.carousel-item:nth-child(3).active) .hero-page-status > span::after { content: "03"; }

.hero-page-status > i {
    width: 1px;
    height: 42px;
    background: linear-gradient(transparent, rgba(216,174,69,.8), transparent);
}

.hero-page-status small { display: grid; gap: 2px; }
.hero-page-status b { color: #fff; font-size: 0; }
.hero-page-status b::after { content: "Sacred journey"; font-size: .86rem; }
.istiqama-hero:has(.carousel-item:nth-child(2).active) .hero-page-status b::after { content: "Pilgrim training"; }
.istiqama-hero:has(.carousel-item:nth-child(3).active) .hero-page-status b::after { content: "Trusted care"; }
.hero-page-status em { color: rgba(255,255,255,.58); font-size: .68rem; font-style: normal; text-transform: uppercase; letter-spacing: .12em; }

.istiqama-hero .hero-orbit-pages {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
}

.istiqama-hero .hero-orbit-pages button {
    position: relative;
    width: auto;
    height: auto;
    min-height: 68px;
    margin: 0;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 18px;
    text-indent: 0;
    text-align: left;
    background: transparent;
    opacity: .58;
    transition: opacity .35s, background .35s, transform .35s;
}

.istiqama-hero .hero-orbit-pages button::after {
    content: "";
    position: absolute;
    left: 69px;
    right: -8px;
    top: 50%;
    height: 1px;
    z-index: -1;
    background: linear-gradient(90deg, rgba(216,174,69,.6), rgba(255,255,255,.08));
}

.istiqama-hero .hero-orbit-pages button:last-child::after { display: none; }
.istiqama-hero .hero-orbit-pages button:hover { opacity: .88; transform: translateY(-2px); }
.istiqama-hero .hero-orbit-pages button.active,
.istiqama-hero:has(.carousel-item:nth-child(1).active) .hero-orbit-pages button:nth-child(1),
.istiqama-hero:has(.carousel-item:nth-child(2).active) .hero-orbit-pages button:nth-child(2),
.istiqama-hero:has(.carousel-item:nth-child(3).active) .hero-orbit-pages button:nth-child(3) {
    opacity: 1;
    color: #102b22;
    background: linear-gradient(135deg, rgba(255, 225, 137, .96), rgba(208, 160, 48, .92));
    box-shadow: 0 10px 28px rgba(216, 174, 69, .2), inset 0 1px 0 rgba(255,255,255,.72);
}
.istiqama-hero .hero-orbit-pages button.is-entering { animation: heroStepEnter 1s cubic-bezier(.2,.75,.18,1) both; }
.istiqama-hero .hero-orbit-pages button.is-leaving { animation: heroStepLeave .72s cubic-bezier(.6,0,.25,1) both; }
.istiqama-hero .hero-orbit-pages button.is-visited { opacity: .82; }
.istiqama-hero .hero-orbit-pages button.is-visited::after {
    background: linear-gradient(90deg, var(--hero-gold), rgba(216,174,69,.32));
    transform-origin: left;
    animation: heroConnectorFill .7s ease both;
}

.hero-page-orbit {
    position: relative;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--hero-gold) var(--hero-orbit-angle), rgba(255,255,255,.2) 0deg);
    transition: transform .45s, box-shadow .45s;
}

.hero-page-orbit::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: inherit;
    background: #073d2e;
    border: 1px solid rgba(255,255,255,.12);
}

.hero-page-orbit::before {
    content: "";
    position: absolute;
    inset: -3px;
    z-index: -1;
    border: 1px solid rgba(255, 222, 126, .78);
    border-radius: 50%;
    opacity: 0;
}

.is-entering .hero-page-orbit::before { animation: heroStepRipple .95s ease-out; }
.is-visited .hero-page-orbit { --hero-orbit-angle: 360deg; box-shadow: 0 0 0 3px rgba(216,174,69,.06); }

.active .hero-page-orbit,
.istiqama-hero:has(.carousel-item:nth-child(1).active) .hero-orbit-pages button:nth-child(1) .hero-page-orbit,
.istiqama-hero:has(.carousel-item:nth-child(2).active) .hero-orbit-pages button:nth-child(2) .hero-page-orbit,
.istiqama-hero:has(.carousel-item:nth-child(3).active) .hero-orbit-pages button:nth-child(3) .hero-page-orbit {
    box-shadow: 0 0 0 5px rgba(216,174,69,.09), 0 0 24px rgba(216,174,69,.3);
    outline: 2px solid #fff0bd;
}

.active .hero-page-orbit {
    animation: heroOrbitProgress var(--hero-duration) linear forwards;
}

.hero-page-cube {
    position: relative;
    z-index: 2;
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    color: #fff;
    border: 1px solid rgba(216,174,69,.65);
    background: linear-gradient(135deg, rgba(216,174,69,.25), rgba(255,255,255,.04));
    transform: rotate(45deg);
    box-shadow: inset 0 0 12px rgba(216,174,69,.12);
}

.hero-page-cube i { font-size: .68rem; font-weight: 800; font-style: normal; transform: rotate(-45deg); }
.active .hero-page-cube { animation: heroCubeTurn 1.1s cubic-bezier(.5,.1,.15,1); background: var(--hero-gold); color: #052c21; }
.istiqama-hero:has(.carousel-item:nth-child(1).active) .hero-orbit-pages button:nth-child(1) .hero-page-cube,
.istiqama-hero:has(.carousel-item:nth-child(2).active) .hero-orbit-pages button:nth-child(2) .hero-page-cube,
.istiqama-hero:has(.carousel-item:nth-child(3).active) .hero-orbit-pages button:nth-child(3) .hero-page-cube { background: #fff6d8; color: #063c2e; border-color: #fff; }
.is-entering .hero-page-cube { animation: heroCubeEnter 1s cubic-bezier(.18,.8,.24,1); }
.hero-page-label { display: grid; min-width: 0; }
.hero-page-label small { color: rgba(255,255,255,.48); font-size: .58rem; letter-spacing: .13em; text-transform: uppercase; }
.hero-page-label strong { overflow: hidden; color: #fff; font-size: .74rem; white-space: nowrap; text-overflow: ellipsis; }
.hero-orbit-pages button.active .hero-page-label small,
.hero-orbit-pages button.active .hero-page-label strong,
.istiqama-hero:has(.carousel-item:nth-child(1).active) .hero-orbit-pages button:nth-child(1) .hero-page-label > *,
.istiqama-hero:has(.carousel-item:nth-child(2).active) .hero-orbit-pages button:nth-child(2) .hero-page-label > *,
.istiqama-hero:has(.carousel-item:nth-child(3).active) .hero-orbit-pages button:nth-child(3) .hero-page-label > * { color: #08372a; }

.hero-play-control {
    width: 72px;
    height: 66px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    color: #fff;
    border: 1px solid rgba(216,174,69,.38);
    border-radius: 20px;
    background: rgba(0,0,0,.16);
    transition: .3s;
}

.hero-play-control:hover { color: var(--hero-gold); background: rgba(0,0,0,.3); transform: translateY(-2px); }
.hero-play-control span { font-size: .57rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.hero-cube-carousel.is-paused .hero-carousel-progress span,
.istiqama-hero.is-paused .active .hero-page-orbit { animation-play-state: paused; }

@keyframes heroProgress { to { transform: scaleX(1); } }
@keyframes heroOrbitProgress { to { --hero-orbit-angle: 360deg; } }
@keyframes heroCubeTurn { 0% { transform: rotate(45deg) scale(.72); } 55% { transform: rotate(225deg) scale(1.12); } 100% { transform: rotate(405deg) scale(1); } }
@keyframes heroCubeEnter { 0% { transform: rotate(-45deg) scale(.55); opacity: .25; } 58% { transform: rotate(238deg) scale(1.18); opacity: 1; } 100% { transform: rotate(405deg) scale(1); opacity: 1; } }
@keyframes heroStepEnter { 0% { opacity: .28; transform: translateY(12px) scale(.9); } 62% { opacity: 1; transform: translateY(-3px) scale(1.025); } 100% { opacity: 1; transform: none; } }
@keyframes heroStepLeave { 0% { opacity: 1; transform: none; } 100% { opacity: .48; transform: translateY(-7px) scale(.94); } }
@keyframes heroStepRipple { 0% { opacity: .85; transform: scale(.74); } 100% { opacity: 0; transform: scale(1.65); } }
@keyframes heroConnectorFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes heroStatusChange { 0% { opacity: .25; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }

.hero-transition-stage {
    position: absolute;
    inset: 0;
    z-index: 10;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.hero-transition-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: radial-gradient(circle at 50% 46%, rgba(255, 235, 170, .3), rgba(8, 112, 82, .12) 34%, transparent 68%);
}

.hero-transition-stage i {
    position: absolute;
    left: var(--particle-left);
    top: var(--particle-top);
    width: var(--particle-size);
    height: var(--particle-size);
    border-radius: 2px 50% 50%;
    opacity: 0;
    background: #f7d579;
    box-shadow: 0 0 8px rgba(255, 224, 137, .75);
}

.hero-transition-stage i:nth-child(3n) { background: #fff8df; }
.hero-transition-stage i:nth-child(4n) { background: #3db48d; }

.hero-cube-carousel.effect-particle-dissolve .hero-transition-stage { opacity: 1; }
.hero-cube-carousel.effect-particle-dissolve .hero-transition-stage::before { animation: heroParticleFlash .86s ease both; }
.hero-cube-carousel.effect-particle-dissolve .hero-transition-stage i {
    animation: heroParticleBurst .78s cubic-bezier(.16,.72,.28,1) var(--particle-delay) both;
}

.hero-cube-carousel .carousel-item[class*="fx-"] {
    visibility: visible !important;
    display: block !important;
    will-change: transform, opacity, filter;
}

.hero-cube-carousel .carousel-item[class*="fx-"][class*="-out"] { z-index: 5 !important; }
.hero-cube-carousel .carousel-item[class*="fx-"][class*="-in"] { z-index: 4 !important; }

.hero-cube-carousel.effect-particle-dissolve .active.carousel-item-start,
.hero-cube-carousel.effect-particle-dissolve .active.carousel-item-end {
    animation: heroDissolveOut .9s cubic-bezier(.55,0,.55,1) both;
}

.hero-cube-carousel.effect-particle-dissolve .carousel-item-next.carousel-item-start,
.hero-cube-carousel.effect-particle-dissolve .carousel-item-prev.carousel-item-end {
    animation: heroDissolveIn .9s cubic-bezier(.2,.72,.2,1) both;
}

.hero-cube-carousel .fx-particle-dissolve-out { animation: heroDissolveOut .98s cubic-bezier(.55,0,.55,1) both !important; }
.hero-cube-carousel .fx-particle-dissolve-in { animation: heroDissolveIn .98s cubic-bezier(.2,.72,.2,1) both !important; }

.hero-cube-carousel.effect-page-fall .active.carousel-item-start,
.hero-cube-carousel.effect-page-fall .active.carousel-item-end {
    transform-origin: 50% 0;
    animation: heroPageFallOut .9s cubic-bezier(.62,0,.72,.22) both;
}

.hero-cube-carousel.effect-page-fall .carousel-item-next.carousel-item-start,
.hero-cube-carousel.effect-page-fall .carousel-item-prev.carousel-item-end {
    transform-origin: 50% 0;
    animation: heroPageFallIn .9s cubic-bezier(.18,.82,.2,1) both;
}

.hero-cube-carousel .fx-page-fall-out {
    transform-origin: 50% 0 !important;
    animation: heroPageFallOut 1s cubic-bezier(.62,0,.72,.22) both !important;
}
.hero-cube-carousel .fx-page-fall-in {
    transform-origin: 50% 0 !important;
    animation: heroPageFallIn 1s cubic-bezier(.18,.82,.2,1) both !important;
}

.hero-cube-carousel.effect-paper-throw .active.carousel-item-start,
.hero-cube-carousel.effect-paper-throw .active.carousel-item-end {
    transform-origin: 68% 38%;
    animation: heroPaperThrowOut .9s cubic-bezier(.62,-.05,.78,.35) both;
}

.hero-cube-carousel.effect-paper-throw .carousel-item-next.carousel-item-start,
.hero-cube-carousel.effect-paper-throw .carousel-item-prev.carousel-item-end {
    transform-origin: 30% 60%;
    animation: heroPaperUnfoldIn .9s cubic-bezier(.16,.84,.22,1) both;
}

.hero-cube-carousel .fx-paper-throw-out {
    transform-origin: 68% 38% !important;
    animation: heroPaperThrowOut 1s cubic-bezier(.62,-.05,.78,.35) both !important;
}
.hero-cube-carousel .fx-paper-throw-in {
    transform-origin: 30% 60% !important;
    animation: heroPaperUnfoldIn 1s cubic-bezier(.16,.84,.22,1) both !important;
}

@keyframes heroParticleFlash {
    0% { opacity: 0; transform: scale(.72); }
    38% { opacity: 1; transform: scale(1.08); }
    100% { opacity: 0; transform: scale(1.32); }
}

@keyframes heroParticleBurst {
    0% { opacity: 0; transform: translate(0, 16px) rotate(0) scale(.2); }
    24% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--particle-x), var(--particle-y)) rotate(var(--particle-spin)) scale(.05); }
}

@keyframes heroDissolveOut {
    0% { opacity: 1; filter: blur(0) saturate(1); transform: scale(1); }
    55% { opacity: .28; filter: blur(7px) saturate(.55); transform: scale(1.035); }
    100% { opacity: 0; filter: blur(18px) saturate(.25); transform: scale(1.075); }
}

@keyframes heroDissolveIn {
    0% { opacity: 0; filter: blur(20px) brightness(1.3); transform: scale(1.08); }
    56% { opacity: .72; filter: blur(5px) brightness(1.08); }
    100% { opacity: 1; filter: none; transform: none; }
}

@keyframes heroPageFallOut {
    0% { opacity: 1; transform: perspective(1400px) rotateX(0) translateY(0); }
    44% { opacity: .9; transform: perspective(1400px) rotateX(28deg) translateY(8%); }
    100% { opacity: 0; transform: perspective(1400px) rotateX(76deg) translateY(92%) scale(.88); }
}

@keyframes heroPageFallIn {
    0% { opacity: 0; transform: perspective(1400px) rotateX(-68deg) translateY(-72%) scale(.9); }
    62% { opacity: 1; transform: perspective(1400px) rotateX(7deg) translateY(3%); }
    100% { opacity: 1; transform: none; }
}

@keyframes heroPaperThrowOut {
    0% { opacity: 1; border-radius: 0; transform: translate(0) rotate(0) scale(1); }
    42% { opacity: .92; border-radius: 24px; transform: translate(5%, -2%) rotate(4deg) scale(.64, .74); }
    100% { opacity: 0; border-radius: 46px; transform: translate(78%, -38%) rotate(28deg) scale(.09, .13); }
}

@keyframes heroPaperUnfoldIn {
    0% { opacity: 0; border-radius: 42px; transform: translate(-44%, 24%) rotate(-17deg) scale(.12, .18); }
    58% { opacity: 1; border-radius: 16px; transform: translate(2%, -1%) rotate(2deg) scale(.92, .96); }
    100% { opacity: 1; border-radius: 0; transform: none; }
}

.hero-page-status.is-changing > span,
.hero-page-status.is-changing small { animation: heroStatusChange .55s ease both; }
.hero-page-status.is-changing small { animation-delay: .08s; }

@media (max-width: 1100px) {
    .hero-page-navigation { grid-template-columns: auto 1fr auto; gap: 14px; padding-inline: 4%; }
    .hero-page-status small, .hero-page-label { display: none; }
    .istiqama-hero .hero-orbit-pages button { justify-content: center; }
    .istiqama-hero .hero-orbit-pages button::after { left: 75%; right: -25%; }
}

@media (max-width: 768px) {
    .hero-page-navigation {
        min-height: 82px;
        grid-template-columns: auto 1fr auto;
        gap: 8px;
        padding: 10px 18px;
        border-radius: 0;
    }
    .hero-page-status > span { min-width: 38px; }
    .hero-page-status > span::after { font-size: 1.42rem; }
    .hero-page-status > i { display: none; }
    .hero-page-orbit { width: 44px; height: 44px; flex-basis: 44px; }
    .hero-page-cube { width: 25px; height: 25px; }
    .istiqama-hero .hero-orbit-pages button { min-height: 54px; padding: 4px; border-radius: 14px; }
    .hero-play-control { width: 48px; height: 50px; border-radius: 15px; }
    .hero-play-control span { display: none; }
    .hero-cube-carousel .carousel-control-prev,
    .hero-cube-carousel .carousel-control-next { display: none; }
    .hero-cube-carousel .carousel-item::after { background-size: 38px 38px; }
}

@media (max-width: 430px) {
    .hero-page-navigation { padding-inline: 12px; }
    .hero-page-status { display: none; }
    .hero-page-navigation { grid-template-columns: 1fr auto; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-cube-carousel:not(.motion-rich) .carousel-item { transition: opacity .25s ease !important; transform: none !important; }
    .hero-cube-carousel:not(.motion-rich) .hero-transition-stage *,
    .hero-cube-carousel:not(.motion-rich) .carousel-item[class*="fx-"] { animation: none !important; filter: none !important; transform: none !important; }
}