/* /wwh homepage hero (FusRock-style), only when site_hero_slides is non-empty */

@keyframes siteHeroFadeUp {
    from {
        opacity: 0;
        transform: translate3d(0, 28px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes siteHeroFadeInSoft {
    from {
        opacity: 0;
        transform: scale(0.97);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes siteHeroTaglinePulse {
    from {
        opacity: 0;
        letter-spacing: 0.12em;
    }
    to {
        opacity: 1;
        letter-spacing: 0.04em;
    }
}

@keyframes siteHeroFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-8deg);
    }
    50% {
        transform: translate3d(0, -2.1rem, 0) rotate(-5deg);
    }
}

@keyframes siteHeroImageFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-2deg);
    }
    50% {
        transform: translate3d(0, -1.7rem, 0) rotate(1deg);
    }
}

@keyframes siteHeroParticleDrift {
    0%, 100% {
        opacity: 0.28;
        transform: translate3d(0, 0, 0) scale(0.72);
    }
    50% {
        opacity: 0.95;
        transform: translate3d(var(--tx, 1.2rem), var(--ty, -1.8rem), 0) scale(1.2);
    }
}

.header {
    height: 4.25rem;
    background: rgba(9, 13, 22, 0.58);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.header .header-content {
    width: min(90%, 1280px);
}

.header .header-logo img {
    width: 7.25rem;
}

@media screen and (min-width:960px) {
    .header .nav-box {
        margin-left: 3.2rem;
    }
    .header .nav-menu > li {
        margin: 0 1.05rem;
    }
    .header .nav-menu > li > a {
        line-height: 4.25rem;
        font-size: 0.92rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.92);
    }
    .header .nav-menu > li.active > a {
        color: rgba(255, 255, 255, 0.92);
    }
    .header .nav-menu > li > a:after {
        bottom: 16%;
        height: 3px;
        background: #38bdf8;
    }
}

.site-hero-swiper {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #05030c;
    overflow: hidden;
}

.site-hero-swiper .swiper-slide {
    height: auto;
}

.site-hero-slide {
    position: relative;
    min-height: 100vh;
    padding: clamp(7rem, 13vh, 9.5rem) 0 calc(8.7rem + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    overflow: hidden;
}

.site-hero-slide::before,
.site-hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.site-hero-slide::before {
    background:
        radial-gradient(55rem 34rem at 56% 39%, rgba(255,255,255,.24), transparent 58%),
        radial-gradient(42rem 30rem at 28% 28%, rgba(189,81,255,.56), transparent 58%),
        radial-gradient(45rem 34rem at 78% 42%, rgba(92,218,255,.45), transparent 62%),
        linear-gradient(90deg, rgba(20,11,56,.68), rgba(3,4,18,.78));
    mix-blend-mode: screen;
    opacity: .82;
}

.site-hero-slide::after {
    background: linear-gradient(90deg, rgba(5,5,15,.26) 0%, transparent 46%, rgba(0,0,0,.42) 100%);
}

.site-hero-tagline {
    position: absolute;
    left: 50%;
    bottom: clamp(24%, 31vh, 39%);
    transform: translateX(-50%);
    width: 94%;
    text-align: center;
    font-size: clamp(2.45rem, 5vw, 5.2rem);
    font-weight: 900;
    letter-spacing: 0.065em;
    color: rgba(255, 255, 255, 0.16);
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}

.site-hero-swiper .swiper-slide-active .site-hero-tagline {
    animation: siteHeroTaglinePulse 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.site-hero-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(21rem, 0.72fr) minmax(26rem, 1fr);
    gap: clamp(1.2rem, 3vw, 4rem);
    align-items: center;
    min-height: calc(100vh - 17rem);
}

.site-hero-swiper .swiper-slide-active .site-hero-left > h1 {
    animation: siteHeroFadeUp 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.06s;
    opacity: 0;
}

.site-hero-swiper .swiper-slide-active .site-hero-sub {
    animation: siteHeroFadeUp 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.12s;
    opacity: 0;
}

.site-hero-swiper .swiper-slide-active .site-hero-left > ul {
    animation: siteHeroFadeUp 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.18s;
    opacity: 0;
}

.site-hero-swiper .swiper-slide-active .site-hero-cta {
    animation: siteHeroFadeUp 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.28s;
    opacity: 0;
}

.site-hero-swiper .swiper-slide-active .site-hero-product-image,
.site-hero-swiper .swiper-slide-active .site-hero-shoe {
    animation: siteHeroFadeInSoft 0.92s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.08s;
    opacity: 0;
}

.site-hero-swiper .swiper-slide-active .site-hero-particle-field i {
    animation-name: siteHeroParticleDrift;
    animation-duration: var(--dur, 4.8s);
    animation-delay: var(--delay, 0s);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

.site-hero-left {
    max-width: 32rem;
}

.site-hero-left h1 {
    margin: 0 0 0.8rem;
    font-size: clamp(2.7rem, 5.2vw, 5.1rem);
    font-weight: 900;
    line-height: 0.98;
    color: #fff;
    letter-spacing: -0.035em;
    text-shadow: 0 12px 32px rgba(0,0,0,.28);
}

.site-hero-sub {
    margin: 0 0 1.1rem;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.62);
}

.site-hero-left ul {
    margin: 0 0 1.8rem;
    padding: 0;
    list-style: none;
    max-width: 26rem;
}

.site-hero-left li {
    position: relative;
    padding-left: 0;
    margin-bottom: 0.35rem;
    font-size: clamp(0.95rem, 1.12vw, 1.1rem);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 2px 16px rgba(0,0,0,.22);
}

.site-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.72rem;
    padding: 0.85rem 1.1rem 0.85rem 1.35rem;
    min-width: 8.6rem;
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 0.32rem;
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    background: rgba(255,255,255,.04);
    transition: background 0.2s, color 0.2s, border-color .2s;
}

.site-hero-cta:hover,
.site-hero-cta:focus {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255,255,255,.95);
    color: #fff;
    text-decoration: none;
}

.site-hero-cta svg {
    margin-left: auto;
    flex-shrink: 0;
}

.site-hero-right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28rem;
}

.site-hero-product-image {
    position: relative;
    z-index: 3;
    max-width: min(62vw, 680px);
    max-height: min(70vh, 650px);
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 36px 65px rgba(0, 0, 0, 0.5));
}

.site-hero-swiper .swiper-slide-active .site-hero-product-image {
    animation: siteHeroFadeInSoft 0.92s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.08s, siteHeroImageFloat 3.9s ease-in-out infinite 1.05s;
}

.site-hero-particle-field {
    position: absolute;
    inset: 2% 4% 0 0;
    z-index: 2;
    pointer-events: none;
}

.site-hero-particle-field i {
    position: absolute;
    width: var(--s, 0.38rem);
    height: var(--s, 0.38rem);
    left: var(--x, 50%);
    top: var(--y, 50%);
    border-radius: 50%;
    background: rgba(244, 221, 255, 0.95);
    box-shadow: 0 0 0.85rem rgba(187, 121, 255, 0.85), 0 0 1.5rem rgba(80, 222, 255, 0.38);
    opacity: 0.35;
}

.site-hero-particle-field i:nth-child(1) { --x: 20%; --y: 18%; --s: .26rem; --tx: -1.8rem; --ty: -1.2rem; --dur: 4.6s; --delay: -.4s; }
.site-hero-particle-field i:nth-child(2) { --x: 34%; --y: 9%; --s: .34rem; --tx: .8rem; --ty: -2.2rem; --dur: 5.2s; --delay: -1.1s; }
.site-hero-particle-field i:nth-child(3) { --x: 48%; --y: 14%; --s: .22rem; --tx: 2.2rem; --ty: -.8rem; --dur: 3.8s; --delay: -.8s; }
.site-hero-particle-field i:nth-child(4) { --x: 65%; --y: 21%; --s: .42rem; --tx: 2.8rem; --ty: -1.6rem; --dur: 5.6s; --delay: -1.9s; }
.site-hero-particle-field i:nth-child(5) { --x: 77%; --y: 36%; --s: .28rem; --tx: 1.4rem; --ty: 1.2rem; --dur: 4.2s; --delay: -.2s; }
.site-hero-particle-field i:nth-child(6) { --x: 83%; --y: 54%; --s: .5rem; --tx: 2rem; --ty: -.2rem; --dur: 6s; --delay: -2.4s; }
.site-hero-particle-field i:nth-child(7) { --x: 73%; --y: 72%; --s: .24rem; --tx: 1rem; --ty: 2rem; --dur: 4.8s; --delay: -1.2s; }
.site-hero-particle-field i:nth-child(8) { --x: 58%; --y: 83%; --s: .38rem; --tx: -.8rem; --ty: 1.4rem; --dur: 5.4s; --delay: -.7s; }
.site-hero-particle-field i:nth-child(9) { --x: 42%; --y: 78%; --s: .23rem; --tx: -2rem; --ty: 1.6rem; --dur: 4.1s; --delay: -1.5s; }
.site-hero-particle-field i:nth-child(10) { --x: 28%; --y: 66%; --s: .48rem; --tx: -2.2rem; --ty: .4rem; --dur: 6.2s; --delay: -2s; }
.site-hero-particle-field i:nth-child(11) { --x: 18%; --y: 48%; --s: .3rem; --tx: -2.8rem; --ty: -.7rem; --dur: 4.7s; --delay: -.9s; }
.site-hero-particle-field i:nth-child(12) { --x: 24%; --y: 33%; --s: .2rem; --tx: -1.4rem; --ty: -1.8rem; --dur: 5.9s; --delay: -1.8s; }
.site-hero-particle-field i:nth-child(13) { --x: 39%; --y: 27%; --s: .18rem; --tx: .6rem; --ty: -1rem; --dur: 3.6s; --delay: -.3s; }
.site-hero-particle-field i:nth-child(14) { --x: 53%; --y: 31%; --s: .31rem; --tx: 1.6rem; --ty: -1.3rem; --dur: 4.9s; --delay: -1.6s; }
.site-hero-particle-field i:nth-child(15) { --x: 68%; --y: 44%; --s: .2rem; --tx: 2rem; --ty: .6rem; --dur: 5.5s; --delay: -2.7s; }
.site-hero-particle-field i:nth-child(16) { --x: 62%; --y: 62%; --s: .45rem; --tx: .8rem; --ty: 1.5rem; --dur: 4.4s; --delay: -.5s; }
.site-hero-particle-field i:nth-child(17) { --x: 48%; --y: 66%; --s: .26rem; --tx: -.9rem; --ty: 1.9rem; --dur: 6.1s; --delay: -1.3s; }
.site-hero-particle-field i:nth-child(18) { --x: 35%; --y: 55%; --s: .36rem; --tx: -1.7rem; --ty: .8rem; --dur: 5s; --delay: -2.1s; }
.site-hero-particle-field i:nth-child(19) { --x: 31%; --y: 42%; --s: .17rem; --tx: -1rem; --ty: -.9rem; --dur: 3.9s; --delay: -.6s; }
.site-hero-particle-field i:nth-child(20) { --x: 43%; --y: 45%; --s: .24rem; --tx: .4rem; --ty: -.6rem; --dur: 4.5s; --delay: -1.7s; }
.site-hero-particle-field i:nth-child(21) { --x: 55%; --y: 51%; --s: .2rem; --tx: .9rem; --ty: .7rem; --dur: 5.8s; --delay: -2.2s; }
.site-hero-particle-field i:nth-child(22) { --x: 70%; --y: 57%; --s: .33rem; --tx: 1.8rem; --ty: .5rem; --dur: 4.3s; --delay: -.1s; }
.site-hero-particle-field i:nth-child(23) { --x: 15%; --y: 74%; --s: .21rem; --tx: -2.5rem; --ty: 1.5rem; --dur: 5.7s; --delay: -1.4s; }
.site-hero-particle-field i:nth-child(24) { --x: 86%; --y: 18%; --s: .19rem; --tx: 2.4rem; --ty: -2.1rem; --dur: 4.6s; --delay: -2.6s; }

.site-hero-shoe {
    position: relative;
    z-index: 3;
    width: min(47vw, 35rem);
    height: min(54vh, 32rem);
    filter: drop-shadow(0 3rem 4.8rem rgba(0, 0, 0, 0.54));
    transform: rotate(-8deg);
}

.site-hero-swiper .swiper-slide-active .site-hero-shoe {
    animation: siteHeroFadeInSoft 0.92s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.08s, siteHeroFloat 3.8s ease-in-out infinite 1.05s;
}

.site-hero-shoe::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 5%;
    width: 58%;
    height: 14%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(3, 5, 16, .55), transparent 70%);
    filter: blur(0.25rem);
}

.site-hero-shoe-upper {
    position: absolute;
    left: 14%;
    top: 10%;
    width: 70%;
    height: 72%;
    border-radius: 64% 36% 58% 42% / 38% 35% 65% 62%;
    background:
        radial-gradient(ellipse at 52% 35%, rgba(255,255,255,.46), transparent 0 14%, transparent 40%),
        radial-gradient(ellipse at 45% 62%, rgba(46, 15, 96, .38), transparent 52%),
        linear-gradient(135deg, rgba(227, 192, 255, .92), rgba(145, 75, 202, .95) 46%, rgba(67, 26, 116, .98));
    box-shadow: inset 1.2rem 1.8rem 3.5rem rgba(255,255,255,.14), inset -1.5rem -2.5rem 4rem rgba(31,9,59,.42);
    overflow: hidden;
}

.site-hero-shoe-upper::before {
    content: "";
    position: absolute;
    inset: 7% 16% 13% 20%;
    border: 0.55rem solid rgba(34, 13, 70, .34);
    border-left-width: 1.2rem;
    border-bottom-color: rgba(255,255,255,.26);
    border-radius: 54% 46% 48% 52% / 44% 42% 58% 56%;
    transform: rotate(15deg);
}

.site-hero-shoe-upper::after {
    content: "";
    position: absolute;
    inset: -8%;
    background-image: radial-gradient(circle, rgba(255,255,255,.72) 0 1.3px, transparent 1.9px);
    background-size: 13px 13px;
    opacity: .46;
    transform: rotate(9deg);
}

.site-hero-shoe-sole {
    position: absolute;
    left: 10%;
    bottom: 16%;
    width: 78%;
    height: 18%;
    border-radius: 68% 32% 54% 46% / 55% 44% 56% 45%;
    background: linear-gradient(180deg, rgba(235, 226, 248, .98), rgba(139, 95, 176, .94));
    box-shadow: inset 0 -.6rem 1.1rem rgba(76,28,122,.28);
    transform: rotate(7deg);
}

.site-hero-shoe span {
    position: absolute;
    left: 50%;
    bottom: 3%;
    transform: translateX(-50%) rotate(8deg);
    color: rgba(255,255,255,.68);
    font-size: 0.92rem;
    font-weight: 900;
    white-space: nowrap;
    letter-spacing: .02em;
}

.site-hero-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8;
    padding: 1.05rem 0 calc(1.15rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(2, 4, 12, 0), rgba(2, 4, 12, .86) 35%, rgba(2,4,12,.94));
    pointer-events: none;
}

.site-hero-bottom > .swiper-pagination.site-hero-pagination {
    pointer-events: auto;
}

.site-hero-bottom.container-outer {
    height: auto !important;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

.site-hero-pagination.swiper-pagination {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    top: auto !important;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.45rem;
    justify-content: flex-start;
    align-items: stretch;
    transform: none !important;
    width: 100%;
}

.site-hero-pagination .swiper-pagination-bullet {
    width: auto;
    height: 5.55rem;
    border-radius: 0;
    margin: 0 !important;
    padding: 0.86rem 1.25rem;
    background: rgba(255, 255, 255, 0.06);
    opacity: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
    transition: background .28s ease, transform .28s ease;
}

.site-hero-pagination .swiper-pagination-bullet-active {
    background: rgba(255, 255, 255, 0.16);
}

.site-hero-pagination .swiper-pagination-bullet::before {
    content: "";
    display: block;
    align-self: stretch;
    height: 2px;
    background: rgba(255, 255, 255, 0.25);
    transition: background 0.35s ease, transform 0.35s ease;
    transform-origin: left center;
}

.site-hero-pagination .swiper-pagination-bullet-active::before {
    background: #fff;
    transform: scaleX(1);
}

.site-hero-rail-num {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.35);
}

.site-hero-pagination .swiper-pagination-bullet-active .site-hero-rail-num {
    color: rgba(255, 255, 255, 0.64);
}

.site-hero-rail-tit {
    font-size: 0.92rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.72);
    max-width: 14rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-hero-pagination .swiper-pagination-bullet-active .site-hero-rail-tit {
    color: #fff;
}

@media (max-width: 1200px) {
    .site-hero-pagination.swiper-pagination {
        gap: 1rem;
    }
    .site-hero-left h1 {
        font-size: clamp(2.35rem, 4.8vw, 4.2rem);
    }
}

@media (max-width: 992px) {
    .site-hero-slide {
        padding-top: 6.2rem;
        padding-bottom: 13rem;
    }
    .site-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        min-height: auto;
    }
    .site-hero-left {
        max-width: none;
    }
    .site-hero-right {
        order: -1;
        min-height: 16rem;
    }
    .site-hero-product-image,
    .site-hero-shoe {
        max-width: min(78vw, 22rem);
        max-height: 34vh;
    }
    .site-hero-shoe {
        width: min(78vw, 22rem);
        height: min(34vh, 19rem);
    }
    .site-hero-left ul {
        text-align: left;
        max-width: 26rem;
        margin-left: auto;
        margin-right: auto;
    }
    .site-hero-cta {
        margin-left: auto;
        margin-right: auto;
    }
    .site-hero-tagline {
        bottom: 34%;
        font-size: clamp(1.4rem, 6vw, 2.4rem);
        white-space: normal;
    }
    .site-hero-pagination.swiper-pagination {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .site-hero-pagination .swiper-pagination-bullet {
        height: 4.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-hero-swiper .swiper-slide-active .site-hero-tagline,
    .site-hero-swiper .swiper-slide-active .site-hero-left > h1,
    .site-hero-swiper .swiper-slide-active .site-hero-sub,
    .site-hero-swiper .swiper-slide-active .site-hero-left > ul,
    .site-hero-swiper .swiper-slide-active .site-hero-cta,
    .site-hero-swiper .swiper-slide-active .site-hero-product-image,
    .site-hero-swiper .swiper-slide-active .site-hero-shoe,
    .site-hero-swiper .swiper-slide-active .site-hero-particle-field i {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        letter-spacing: 0.04em !important;
    }
}

/* 1:1 FusRock.cn Slider Revolution hero replica layer */
.site-hero-swiper {
    min-height: 100vh;
    background: #06040d;
}

.site-hero-slide {
    min-height: 100vh;
    padding: clamp(7.6rem, 13vh, 9.2rem) 0 calc(8.25rem + env(safe-area-inset-bottom, 0px));
    background: #06040d;
}

.site-hero-reference-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.04);
    transition: transform 7.8s linear;
}

.site-hero-swiper .swiper-slide-active .site-hero-reference-bg {
    transform: scale(1);
}

.site-hero-slide::before {
    z-index: 1;
    background:
        radial-gradient(30rem 21rem at 52% 36%, rgba(240,210,255,.15), transparent 70%),
        linear-gradient(90deg, rgba(6,4,14,.05) 0%, rgba(4,5,15,.08) 48%, rgba(0,0,0,.44) 100%);
    mix-blend-mode: normal;
    opacity: 1;
}

.site-hero-slide::after {
    z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.02) 62%, rgba(0,0,0,.62));
}

.site-hero-grid {
    z-index: 4;
    grid-template-columns: minmax(22rem, .74fr) minmax(35rem, 1.12fr);
    min-height: calc(100vh - 15.8rem);
    align-items: center;
    height: auto;
    padding-left: clamp(3.2rem, 7vw, 8.5rem);
    padding-right: clamp(2rem, 5vw, 6rem);
}

.site-hero-left {
    max-width: min(37rem, 42vw);
    transform: translateY(-.5rem);
    min-width: 0;
}

.site-hero-left h1 {
    font-family: "Arial Black", Impact, "Dela Gothic One", system-ui, sans-serif;
    font-size: clamp(2.75rem, 4.65vw, 5.1rem);
    font-weight: 900;
    line-height: .92;
    letter-spacing: -.055em;
    margin-bottom: 1.1rem;
}

.site-hero-sub {
    margin-bottom: .8rem;
    color: rgba(255,255,255,.62);
    font-size: 1rem;
}

.site-hero-left li {
    font-size: clamp(.95rem, 1.06vw, 1.1rem);
    line-height: 1.48;
    margin-bottom: .22rem;
    color: rgba(255,255,255,.94);
}

.site-hero-cta {
    margin-top: 1.25rem;
    width: 9.2rem;
    height: 3.05rem;
    padding: 0 .9rem 0 1.05rem;
    justify-content: space-between;
    border-radius: .35rem;
    background: rgba(255,255,255,.035);
    border-color: rgba(255,255,255,.72);
    white-space: nowrap;
}

.site-hero-tagline {
    z-index: 3;
    bottom: clamp(24%, 30vh, 37%);
    font-family: "Arial Black", Impact, system-ui, sans-serif;
    font-size: clamp(2.7rem, 5.05vw, 5.9rem);
    font-weight: 900;
    letter-spacing: .02em;
    color: rgba(255,255,255,.2);
    opacity: .46;
    text-shadow: 0 0 2.8rem rgba(255,255,255,.1);
}

.site-hero-right {
    min-height: min(68vh, 41rem);
    transform: translateY(-.55rem);
}

.site-hero-product-image {
    max-width: min(62vw, 50rem);
    max-height: min(74vh, 48rem);
    filter: drop-shadow(0 3.4rem 5.5rem rgba(0,0,0,.52));
    will-change: transform;
}

.site-hero-slide.visual-shoe .site-hero-product-image {
    width: min(36vw, 34rem);
    max-height: none;
}

.site-hero-slide.visual-pla .site-hero-product-image {
    width: min(50vw, 43rem);
}

.site-hero-slide.visual-pet .site-hero-product-image {
    width: min(50vw, 44rem);
    transform: translateX(2vw);
}

.site-hero-slide.visual-nexpa .site-hero-product-image {
    width: min(43vw, 36rem);
}

.site-hero-slide.visual-pet .site-hero-left,
.site-hero-slide.visual-nexpa .site-hero-left {
    max-width: min(42rem, 48vw);
    transform: translateY(-.85rem);
}

.site-hero-pet-stack {
    display: grid;
    gap: clamp(1.2rem, 3vh, 2.35rem);
}

.site-hero-pet-panel h1 {
    margin: 0 0 .85rem;
    font-family: "Arial Black", Impact, "Dela Gothic One", system-ui, sans-serif;
    font-size: clamp(3rem, 5.35vw, 6.2rem);
    font-weight: 900;
    line-height: .78;
    letter-spacing: -.075em;
    color: #fff;
    text-shadow: 0 12px 32px rgba(0,0,0,.26);
    white-space: nowrap;
    max-width: 100%;
}

.site-hero-slide.visual-nexpa .site-hero-pet-panel h1 {
    font-size: clamp(2.7rem, 4.95vw, 5.75rem);
    letter-spacing: -.09em;
}

.site-hero-pet-panel ul {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    max-width: min(43rem, 48vw);
}

.site-hero-pet-panel li {
    font-size: clamp(.9rem, 1.1vw, 1.08rem);
    line-height: 1.42;
    color: rgba(255,255,255,.92);
    text-shadow: 0 2px 12px rgba(0,0,0,.25);
}

.site-hero-pet-panel .site-hero-cta {
    width: auto;
    min-width: 14.8rem;
    margin-top: .5rem;
}

.site-hero-slide.visual-pet .site-hero-tagline,
.site-hero-slide.visual-nexpa .site-hero-tagline {
    bottom: 33%;
    opacity: .32;
}

.site-hero-slide.visual-pet .site-hero-reference-bg,
.site-hero-slide.visual-nexpa .site-hero-reference-bg {
    background-position: center center;
    transform: scale(1.01);
}

.site-hero-slide.visual-shoe .site-hero-reference-bg {
    background-position: center top;
}

.site-hero-slide.visual-pla .site-hero-reference-bg {
    background-position: center center;
}

.site-hero-swiper .swiper-slide-active .site-hero-product-image {
    animation: siteHeroFadeInSoft .82s cubic-bezier(.22,1,.36,1) forwards .08s, siteHeroImageFloat 3.4s ease-in-out infinite 1s;
}

.site-hero-particle-field {
    inset: -5% -2% -2% 0;
    z-index: 2;
    filter: blur(.1px);
}

.site-hero-particle-field i {
    background: rgba(218,176,255,.94);
    box-shadow:
        0 0 .55rem rgba(210,132,255,.95),
        0 0 1.35rem rgba(133,210,255,.56),
        0 0 2.8rem rgba(255,255,255,.2);
}

.site-hero-bottom {
    z-index: 9;
    padding: 1.1rem 0 calc(.95rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(1,2,8,0), rgba(1,2,8,.8) 36%, rgba(1,2,8,.94));
}

.site-hero-pagination.swiper-pagination {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.55rem;
}

.site-hero-pagination .swiper-pagination-bullet {
    height: 6.05rem;
    padding: .88rem 1.05rem 1rem;
    background: rgba(255,255,255,.065);
    border: 1px solid rgba(255,255,255,.02);
}

.site-hero-pagination .swiper-pagination-bullet-active {
    background: rgba(255,255,255,.16);
}

.site-hero-pagination .swiper-pagination-bullet::before {
    height: 2px;
    background: rgba(255,255,255,.32);
}

.site-hero-rail-tit {
    font-family: "Arial Black", Impact, system-ui, sans-serif;
    font-size: .98rem;
    font-weight: 900;
    letter-spacing: -.02em;
}

@media (max-width: 992px) {
    .site-hero-slide {
        padding-top: 5.8rem;
        padding-bottom: 13rem;
    }
    .site-hero-grid {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-left: 1.4rem;
        padding-right: 1.4rem;
    }
    .site-hero-left,
    .site-hero-slide.visual-pet .site-hero-left,
    .site-hero-slide.visual-nexpa .site-hero-left {
        max-width: none;
    }
    .site-hero-right {
        min-height: 18rem;
    }
    .site-hero-product-image,
    .site-hero-slide.visual-shoe .site-hero-product-image,
    .site-hero-slide.visual-pla .site-hero-product-image,
    .site-hero-slide.visual-pet .site-hero-product-image,
    .site-hero-slide.visual-nexpa .site-hero-product-image {
        width: min(84vw, 26rem);
        max-height: 34vh;
    }
    .site-hero-tagline {
        bottom: 36%;
        font-size: clamp(1.7rem, 7vw, 2.8rem);
    }
    .site-hero-pet-stack {
        gap: 1.2rem;
    }
    .site-hero-pet-panel h1 {
        font-size: clamp(2.45rem, 12vw, 4.4rem);
        line-height: .88;
    }
    .site-hero-slide.visual-nexpa .site-hero-pet-panel h1 {
        font-size: clamp(2.15rem, 10.8vw, 4rem);
    }
    .site-hero-pet-panel ul {
        max-width: none;
    }
    .site-hero-pet-panel .site-hero-cta {
        width: auto;
        min-width: 12rem;
        margin-left: auto;
        margin-right: auto;
    }
    .site-hero-pagination.swiper-pagination {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .85rem;
    }
}

/* Palette accents sampled from the supplied FusRock color references */
.header .nav-menu > li > a:after,
.site-hero-bullet::after{background:linear-gradient(90deg,#e6b24f,#78c80c)}
.site-hero-cta.primary{background:linear-gradient(135deg,#2f8fc8,#1889e8)}
.site-hero-cta.secondary{border-color:rgba(230,178,79,.62);color:#fff}
.site-hero-pagination .swiper-pagination-bullet-active{border-color:#e6b24f}
.site-hero-pagination .swiper-pagination-bullet-active::before{background:#e6b24f}
.site-hero-slide.visual-pet{--site-hero-accent:#78c80c}
.site-hero-slide.visual-nexpa{--site-hero-accent:#8a928e}
.site-hero-slide.visual-pla{--site-hero-accent:#ff9130}
.site-hero-slide.visual-shoe{--site-hero-accent:#73b8d9}
.site-hero-slide.visual-pet .site-hero-cta.primary{background:linear-gradient(135deg,#78c80c,#2f8fc8)}
.site-hero-slide.visual-nexpa .site-hero-cta.primary{background:linear-gradient(135deg,#8a928e,#1889e8)}
.site-hero-slide.visual-pla .site-hero-cta.primary{background:linear-gradient(135deg,#ff9130,#e6b24f)}
.site-hero-slide.visual-shoe .site-hero-cta.primary{background:linear-gradient(135deg,#73b8d9,#2f8fc8)}

/* Header controls must stay centered after this later-loaded hero stylesheet. */
@media screen and (min-width: 960px) {
    .header,
    .header .header-content,
    .header .header-logo,
    .header .header-logo a,
    .header .nav-box,
    .header .nav-menu,
    .header .nav-menu > li,
    .header .nav-button {
        height: 4.25rem !important;
        display: flex !important;
        align-items: center !important;
    }
    .header .header-content {
        justify-content: space-between !important;
    }
    .header .nav-menu > li > a {
        height: 4.25rem !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .header .nav-menu > li > a:after {
        bottom: .78rem !important;
    }
    .header .nav-button {
        align-self: stretch !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .header .nav-button .language,
    .header .nav-button .search-btn {
        height: 2.6rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .header .nav-button .language > a,
    .header .nav-button .search-btn > a {
        height: 2.6rem !important;
        min-height: 2.6rem !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .header .nav-button .language > a {
        padding-left: .8rem !important;
        padding-right: .8rem !important;
    }
    .header .nav-button .search-btn {
        margin-left: .55rem !important;
    }
    .header .nav-button .search-btn > a {
        width: 2.6rem !important;
    }
    .header .nav-button .language svg,
    .header .nav-button .search-btn svg {
        display: block !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        transform: none !important;
    }
    .header .nav-button .language span {
        display: inline-flex !important;
        align-items: center !important;
        height: 1em !important;
        margin: 0 .28rem 0 .45rem !important;
        line-height: 1 !important;
        transform: none !important;
    }
}

/* Final homepage override: non-mobile header controls share one centered axis. */
@media screen and (min-width: 769px) {
    .header {
        height: 4.25rem !important;
    }
    .header .header-content,
    .header .header-logo,
    .header .header-logo a,
    .header .nav-box,
    .header .nav-menu,
    .header .nav-menu > li,
    .header .nav-button {
        height: 4.25rem !important;
        min-height: 4.25rem !important;
        display: flex !important;
        align-items: center !important;
    }
    .header .header-content {
        justify-content: space-between !important;
    }
    .header .header-logo,
    .header .nav-box,
    .header .nav-menu,
    .header .nav-button {
        align-self: stretch !important;
    }
    .header .nav-menu > li {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .header .nav-menu > li > a {
        height: 4.25rem !important;
        min-height: 4.25rem !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        transform: none !important;
    }
    .header .nav-menu > li > a:after {
        bottom: .78rem !important;
    }
    .header .nav-button {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .header .nav-button .language,
    .header .nav-button .search-btn {
        height: 100% !important;
        min-height: 4.25rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        transform: none !important;
    }
    .header .nav-button .language > a,
    .header .nav-button .search-btn > a {
        height: 2.6rem !important;
        min-height: 2.6rem !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        transform: none !important;
    }
    .header .nav-button .language > a {
        padding-left: .8rem !important;
        padding-right: .8rem !important;
    }
    .header .nav-button .search-btn {
        margin-left: .55rem !important;
    }
    .header .nav-button .search-btn > a {
        width: 2.6rem !important;
    }
    .header .nav-button .language svg,
    .header .nav-button .search-btn svg,
    .header .header-logo img {
        display: block !important;
        flex: 0 0 auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        transform: none !important;
    }
    .header .nav-button .language span {
        display: inline-flex !important;
        align-items: center !important;
        height: 1em !important;
        line-height: 1 !important;
        margin: 0 .28rem 0 .45rem !important;
        transform: none !important;
    }
}

/* Homepage compact mega menus: keep image menus visible on laptop screens. */
@media screen and (min-width: 769px) {
    .header .nav-menu > li.nav-service > ul {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: .48rem !important;
        width: min(52rem, calc(100vw - 1rem)) !important;
        max-width: calc(100vw - 1rem) !important;
        max-height: calc(100vh - 4.6rem) !important;
        padding: .55rem !important;
        border-radius: 14px !important;
        top: 4.25rem !important;
    }
    .header .nav-menu > li.nav-service > ul > li {
        border-radius: 10px !important;
    }
    .header .nav-menu > li.nav-service > ul > li > a {
        min-height: 5.75rem !important;
        padding: .42rem .46rem .5rem !important;
        font-size: .72rem !important;
        line-height: 1.18 !important;
    }
    .header .nav-menu > li.nav-service > ul > li > a::before {
        height: 3.45rem !important;
        margin-bottom: .32rem !important;
        border-radius: 8px !important;
    }
    .header .nav-menu > li.nav-cases > ul {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: .38rem !important;
        width: min(64rem, calc(100vw - 1rem)) !important;
        max-width: calc(100vw - 1rem) !important;
        max-height: calc(100vh - 4.6rem) !important;
        padding: .46rem !important;
        border-radius: 14px !important;
        top: 4.25rem !important;
        overflow: auto !important;
    }
    .header .nav-menu > li.nav-cases > ul > li {
        border-radius: 10px !important;
        box-shadow: 0 6px 16px rgba(15,23,42,.05) !important;
    }
    .header .nav-menu > li.nav-cases > ul > li > a {
        gap: .28rem !important;
        min-height: 4.65rem !important;
        padding: .3rem .34rem .36rem !important;
        font-size: .66rem !important;
        line-height: 1.12 !important;
    }
    .header .nav-menu > li.nav-cases > ul > li > a::before {
        aspect-ratio: 2.3/1 !important;
        border-radius: 7px !important;
    }
}
@media screen and (min-width: 769px) and (max-width: 1180px) {
    .header .nav-menu > li.nav-cases > ul {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        width: calc(100vw - .7rem) !important;
        gap: .32rem !important;
        padding: .38rem !important;
    }
    .header .nav-menu > li.nav-cases > ul > li > a {
        min-height: 4.25rem !important;
        padding: .26rem .3rem .32rem !important;
        font-size: .62rem !important;
    }
    .header .nav-menu > li.nav-service > ul {
        width: min(49rem, calc(100vw - .7rem)) !important;
        gap: .38rem !important;
        padding: .45rem !important;
    }
}