.product-image {
    background: #0b1b2b;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-image {
    overflow: hidden;
    background: #0b1b2b;
}

.detail-image img {
    width: 100%;
    height: 100%;
    min-height: 520px;
    max-height: none;
    object-fit: cover;
}

.hero-showcase {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 610px;
    place-items: center;
    isolation: isolate;
}

.hero-tech-field {
    position: absolute;
    width: min(510px, 41vw);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    animation: hero-field-rotate 26s linear infinite;
}

.hero-tech-field::before,
.hero-tech-field::after,
.hero-tech-field span {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.hero-tech-field::before {
    inset: 9%;
    border: 1px dashed rgba(255, 255, 255, .12);
}

.hero-tech-field::after {
    inset: 21%;
    border: 1px solid rgba(239, 108, 37, .3);
    box-shadow: inset 0 0 55px rgba(239, 108, 37, .055);
}

.hero-tech-field span:nth-child(1) {
    inset: 4%;
    border: 1px solid transparent;
    border-top-color: rgba(239, 108, 37, .78);
    border-right-color: rgba(239, 108, 37, .18);
}

.hero-tech-field span:nth-child(2) {
    inset: 29%;
    border: 1px solid rgba(255, 255, 255, .1);
}

.hero-tech-field i,
.hero-tech-field b {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ef6c25;
    box-shadow: 0 0 0 8px rgba(239, 108, 37, .12), 0 0 28px rgba(239, 108, 37, .72);
}

.hero-tech-field i { top: 14%; right: 14%; }
.hero-tech-field b { bottom: 18%; left: 10%; transform: scale(.58); }

.hero-product-glow {
    position: absolute;
    width: min(390px, 31vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(239, 108, 37, .2), rgba(58, 105, 142, .1) 44%, transparent 72%);
    filter: blur(10px);
    animation: hero-glow 4.8s ease-in-out infinite;
}

.hero-product-cutout {
    position: relative;
    z-index: 2;
    display: block;
    width: min(520px, 42vw);
    animation: hero-product-float 5.6s ease-in-out infinite;
    filter: drop-shadow(0 38px 34px rgba(0, 0, 0, .42));
    transition: filter .3s ease;
}

.hero-product-cutout:hover,
.hero-product-cutout:focus-visible {
    outline: none;
    filter: drop-shadow(0 42px 38px rgba(0, 0, 0, .5)) drop-shadow(0 0 18px rgba(239, 108, 37, .22));
}

.hero-product-cutout img {
    width: 100%;
    height: auto;
    transform: rotate(-2deg);
}

.hero-single-label {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 78px;
    display: grid;
    grid-template-columns: auto 1fr;
    min-width: 315px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(7, 19, 31, .78);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .25);
    backdrop-filter: blur(12px);
    clip-path: polygon(0 0, 94% 0, 100% 24%, 100% 100%, 0 100%);
}

.hero-single-label span {
    grid-row: 1 / 3;
    align-self: center;
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px solid rgba(255, 255, 255, .15);
    color: #ef6c25;
    font: 700 18px/1 Space Grotesk, sans-serif;
}

.hero-single-label strong { color: #fff; font: 700 16px/1.3 Space Grotesk, sans-serif; }
.hero-single-label small { color: #96a5b2; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.hero-single-label small b { float: right; color: #ef6c25; font-size: 15px; }

.hero-axis-label {
    position: absolute;
    right: -42px;
    top: 50%;
    color: rgba(255, 255, 255, .28);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .22em;
    transform: rotate(90deg) translateX(50%);
    transform-origin: right center;
}

@keyframes hero-product-float {
    0%, 100% { transform: translate3d(0, 2px, 0) rotate(-.5deg); }
    50% { transform: translate3d(0, -17px, 0) rotate(.8deg); }
}

@keyframes hero-field-rotate { to { transform: rotate(360deg); } }

@keyframes hero-glow {
    0%, 100% { opacity: .62; transform: scale(.94); }
    50% { opacity: 1; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-tech-field,
    .hero-product-cutout,
    .hero-product-glow { animation: none; }
}

@media (min-width: 781px) {
    .nav-row { position: relative; }

    .site-nav {
        position: absolute;
        left: 50%;
        margin-left: 0;
        transform: translateX(-50%);
    }

    .nav-actions { margin-left: auto; }

    .mega-menu {
        right: -320px;
        max-width: calc(100vw - 40px);
    }
}

@media (max-width: 780px) {
    .detail-image img { min-height: 350px; }

    .hero .hero-showcase {
        display: grid;
        min-height: 420px;
        margin-top: 12px;
    }

    .hero-tech-field { width: min(360px, 92vw); }
    .hero-product-glow { width: min(280px, 72vw); }
    .hero-product-cutout { width: min(365px, 93vw); }
    .hero-single-label { right: 0; bottom: 18px; min-width: min(315px, 86vw); }
    .hero-axis-label { display: none; }
}

@media (max-width: 430px) {
    .hero .hero-showcase { min-height: 385px; }
    .hero-product-cutout { width: 330px; }
    .hero-single-label { min-width: 290px; padding: 14px; }
    .hero-single-label span { font-size: 16px; }
    .hero-single-label strong { font-size: 14px; }
}