/* Apple Style 3D Interactive Feature Grid - PERFECT MASONRY */
.feature-grid-container-abs {
    position: relative;
    width: 90vw;
    max-width: 1276px;
    margin: 3rem auto 5.5rem;
    aspect-ratio: 1276 / 694;
    perspective: 1500px;
}

.feature-section-intro {
    box-sizing: border-box;
    width: min(90vw, 1276px);
    margin: 0 auto;
    padding: clamp(7.5rem, 11vw, 11rem) clamp(18px, 3vw, 48px) 0;
    text-align: center;
}

.feature-section-kicker {
    margin: 0 0 1.15rem;
    color: rgba(7, 17, 31, 0.48);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: clamp(12px, 1.05vw, 14px);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.feature-section-title {
    margin: 0;
    color: #07111f;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: clamp(48px, 6vw, 86px);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 0.98;
    text-wrap: balance;
}

.feature-section-desc {
    max-width: 760px;
    margin: 1.45rem auto 0;
    color: rgba(7, 17, 31, 0.58);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: clamp(19px, 1.65vw, 25px);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.58;
    text-wrap: balance;
}

@media (max-width: 760px) {
    .feature-section-intro {
        padding-top: 5.5rem;
        text-align: left;
    }

    .feature-grid-container-abs {
        margin-top: 2rem;
        margin-bottom: 4rem;
    }

    .feature-section-desc {
        margin-left: 0;
        margin-right: 0;
    }

    .feature-section-title {
        font-size: clamp(36px, 10vw, 52px);
        line-height: 1.05;
    }

    .feature-section-desc {
        font-size: 17px;
    }
}

/* Base style for individual cards */
.feature-card-abs {
    position: absolute;
    background-color: transparent;
    transition: transform 0.1s ease-out;
    will-change: transform;
    transform-style: preserve-3d;
    cursor: pointer;
    z-index: 1;
}

.feature-card-abs:focus {
    outline: none;
}

/* Image slice inside the card */
.feature-card-abs img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* DO NOT CROP */
    pointer-events: none;
    transform: translateZ(20px);
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
}

/* Apple Glow Effect on hover */
.feature-card-abs::after {
    content: '';
    position: absolute;
    top: 5%;
    left: 5%;
    right: 5%;
    bottom: 5%;
    border-radius: 20px;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 2;
    transform: translateZ(21px);
}

.feature-card-abs:hover {
    z-index: 10;
}

.feature-card-abs:hover img {
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.feature-card-abs:hover::after {
    opacity: 1;
}

/* CR3S dynamic avoidance prototype */
.feature-card-live-dynamic {
    overflow: hidden;
    border-radius: 20px;
    background: #202225;
}

.feature-card-live-dynamic .feature-card-fallback {
    opacity: 0;
}

.dynamic-avoidance-card {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    background:
        radial-gradient(circle at 67% 56%, rgba(24, 245, 190, 0.08), transparent 34%),
        linear-gradient(180deg, #222428 0%, #1f2125 100%);
    transform: translateZ(22px);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

.dynamic-avoidance-card::before {
    content: none;
}

.feature-card-live-dynamic:hover .dynamic-avoidance-card::before,
.feature-card-live-dynamic:focus-visible .dynamic-avoidance-card::before {
    content: none;
}

.dynamic-copy {
    position: absolute;
    top: 12.5%;
    left: 8.5%;
    z-index: 6;
}

.dynamic-copy h3 {
    margin: 0;
    color: #f7fbff;
    font-size: clamp(20px, 3.15vw, 42px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}

.dynamic-copy p {
    margin: 0.75rem 0 0;
    color: rgba(246, 251, 255, 0.58);
    font-size: clamp(10px, 1.2vw, 15px);
    font-weight: 500;
    letter-spacing: 0;
}

.dynamic-beam {
    display: none;
}

.beam-left {
    transform: translateX(-82%) rotate(-17deg);
}

.beam-right {
    transform: translateX(-18%) rotate(17deg);
}

.feature-card-live-dynamic:hover .beam-left,
.feature-card-live-dynamic:focus-visible .beam-left {
    opacity: 0.74;
    transform: translateX(-86%) rotate(-12deg);
}

.feature-card-live-dynamic:hover .beam-right,
.feature-card-live-dynamic:focus-visible .beam-right {
    opacity: 0.74;
    transform: translateX(-14%) rotate(12deg);
}

.avoidance-path {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.path-base,
.path-live {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.path-base {
    stroke: rgba(181, 255, 234, 0.12);
    stroke-width: 3;
}

.path-live {
    stroke: rgba(143, 255, 214, 0.88);
    stroke-width: 3.4;
    stroke-dasharray: 38 220;
    stroke-dashoffset: 170;
    opacity: 0;
    filter: drop-shadow(0 0 8px rgba(45, 255, 199, 0.42));
}

.feature-card-live-dynamic:hover .path-live,
.feature-card-live-dynamic:focus-visible .path-live {
    opacity: 1;
    animation: cr3PathFlow 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.avoidance-obstacle {
    position: absolute;
    z-index: 5;
    width: 11%;
    aspect-ratio: 1;
    border-radius: 999px;
    background:
        radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.75), transparent 15%),
        linear-gradient(145deg, #737982, #353a42);
    box-shadow: inset 0 -5px 12px rgba(0, 0, 0, 0.32), 0 12px 24px rgba(0, 0, 0, 0.22);
    opacity: 0.28;
    transform: scale(0.82);
    transition: opacity 0.55s ease, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.obstacle-left {
    left: 47%;
    top: 43%;
}

.obstacle-right {
    right: 10%;
    top: 36%;
}

.feature-card-live-dynamic:hover .avoidance-obstacle,
.feature-card-live-dynamic:focus-visible .avoidance-obstacle {
    opacity: 0.82;
    transform: scale(1);
}

.scan-field {
    position: absolute;
    left: 50%;
    bottom: 26%;
    z-index: 3;
    width: 40%;
    aspect-ratio: 1;
    border-radius: 999px;
    border: 1px solid rgba(143, 255, 214, 0.18);
    background: radial-gradient(circle, rgba(143, 255, 214, 0.18), transparent 62%);
    opacity: 0;
    transform: translateX(-50%) scale(0.76);
}

.feature-card-live-dynamic:hover .scan-field,
.feature-card-live-dynamic:focus-visible .scan-field {
    animation: cr3ScanPulse 2.8s ease-in-out infinite;
}

.avoidance-vehicle {
    position: absolute;
    left: 68%;
    top: 80%;
    z-index: 7;
    width: 17%;
    aspect-ratio: 1 / 1.05;
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
}

.feature-card-live-dynamic:hover .avoidance-vehicle,
.feature-card-live-dynamic:focus-visible .avoidance-vehicle {
    animation: cr3VehicleAvoid 3.2s cubic-bezier(0.34, 1, 0.64, 1) infinite;
}

.vehicle-body {
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 0;
    height: 68%;
    border-radius: 26% 26% 14% 14%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent 28%),
        linear-gradient(145deg, #d3d9e1 0%, #9fa8b4 100%);
    box-shadow: inset 0 -16px 22px rgba(75, 86, 99, 0.22), 0 20px 42px rgba(0, 0, 0, 0.26);
}

.vehicle-panel {
    position: absolute;
    left: 25%;
    right: 25%;
    top: 16%;
    height: 22%;
    border-radius: 9px;
    background: linear-gradient(180deg, #aeb7c1, #8f99a5);
    box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.2), inset 0 -2px 6px rgba(42, 49, 58, 0.24);
}

.vehicle-sensor {
    position: absolute;
    top: 18%;
    width: 25%;
    aspect-ratio: 1;
    border-radius: 999px;
    background: radial-gradient(circle at 50% 50%, #d8dde4 0 12%, #858d98 14% 34%, #2c3036 36% 100%);
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.18);
}

.sensor-left {
    left: 4%;
}

.sensor-right {
    right: 4%;
}

@keyframes cr3VehicleAvoid {
    0% {
        left: 68%;
        top: 80%;
        transform: translate(-50%, -50%);
    }

    16% {
        left: 68%;
        top: 71%;
        transform: translate(-50%, -50%);
    }

    32% {
        left: 79%;
        top: 61%;
        transform: translate(-50%, -50%);
    }

    46% {
        left: 81%;
        top: 51%;
        transform: translate(-50%, -50%);
    }

    60% {
        left: 70%;
        top: 43%;
        transform: translate(-50%, -50%);
    }

    74% {
        left: 57%;
        top: 35%;
        transform: translate(-50%, -50%);
    }

    88% {
        left: 61%;
        top: 24%;
        transform: translate(-50%, -50%);
    }

    100% {
        left: 68%;
        top: 13%;
        transform: translate(-50%, -50%);
    }
}

@keyframes cr3PathFlow {
    0% {
        stroke-dashoffset: 180;
    }

    100% {
        stroke-dashoffset: -80;
    }
}

@keyframes cr3ScanPulse {

    0%,
    100% {
        opacity: 0;
        transform: translateX(-50%) scale(0.72);
    }

    35% {
        opacity: 0.8;
        transform: translateX(-50%) scale(0.98);
    }

    72% {
        opacity: 0.12;
        transform: translateX(-50%) scale(1.3);
    }
}

@media (prefers-reduced-motion: reduce) {

    .feature-card-live-dynamic:hover .avoidance-vehicle,
    .feature-card-live-dynamic:focus-visible .avoidance-vehicle,
    .feature-card-live-dynamic:hover .path-live,
    .feature-card-live-dynamic:focus-visible .path-live,
    .feature-card-live-dynamic:hover .scan-field,
    .feature-card-live-dynamic:focus-visible .scan-field {
        animation: none;
    }
}

/* CR3S subtle live overlays for the remaining feature cards */
.feature-card-live-subtle {
    overflow: hidden;
    border-radius: 18px;
}

.feature-card-en-copy {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: clamp(14px, 8%, 28px);
    color: #f8fbff;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    transform: translateZ(34px);
    backface-visibility: hidden;
    will-change: transform;
}

.feature-card-en-copy::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg,
            rgba(36, 37, 41, 1) 0%,
            rgba(36, 37, 41, 1) var(--en-mask-solid, 54%),
            rgba(36, 37, 41, 0.9) var(--en-mask-fade, 76%),
            rgba(36, 37, 41, var(--en-mask-end-opacity, 0.46)) 100%);
    mix-blend-mode: normal;
    transform: translateZ(0);
}

.feature-card-en-copy-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    max-width: min(64%, 310px);
}

.feature-card-en-copy h3 {
    margin: 0;
    color: #f7fbff;
    font-size: clamp(18px, 2.3vw, 30px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.feature-card-en-copy p {
    margin: 0;
    color: rgba(247, 251, 255, 0.66);
    font-size: clamp(10px, 1.05vw, 14px);
    font-weight: 500;
    line-height: 1.24;
    letter-spacing: 0;
    text-wrap: balance;
}

.feature-card-en-copy--small {
    padding: clamp(12px, 7.2%, 24px);
}

.feature-card-en-copy--small .feature-card-en-copy-inner {
    max-width: min(72%, 240px);
}

.feature-card-en-copy--small h3 {
    font-size: clamp(16px, 1.9vw, 24px);
}

.feature-card-en-copy--small p {
    font-size: clamp(9px, 0.95vw, 13px);
}

.feature-card-en-copy--wide .feature-card-en-copy-inner {
    max-width: min(68%, 360px);
}

.feature-card-en-copy--tight::before {
    background: linear-gradient(90deg,
            rgba(36, 37, 41, 1) 0%,
            rgba(36, 37, 41, 1) var(--en-mask-solid, 56%),
            rgba(36, 37, 41, 0.92) var(--en-mask-fade, 78%),
            rgba(36, 37, 41, var(--en-mask-end-opacity, 0.48)) 100%);
}

.feature-card-en-copy--lower {
    align-items: flex-end;
    justify-content: flex-start;
}

.feature-card-en-copy--lower .feature-card-en-copy-inner {
    margin-top: auto;
}

.en-product-page .safety-live,
.en-product-page .scan-live,
.en-product-page .terrain-live,
.en-product-page .environment-live,
.en-product-page .remote-live,
.en-product-page .perception-live {
    background: #242529;
}

.en-product-page .safety-live>img,
.en-product-page .scan-live>img,
.en-product-page .terrain-live>img,
.en-product-page .environment-live>img,
.en-product-page .remote-live>img,
.en-product-page .perception-live>img {
    opacity: 0;
}

.en-product-page .scan-live .subtle-live-layer,
.en-product-page .perception-live .subtle-live-layer {
    opacity: 1;
}

.en-product-page .terrain-live .terrain-breathe-layer {
    opacity: 1;
}

.en-product-page .terrain-live .terrain-breathe {
    opacity: 0.26;
    animation-play-state: paused;
}

.fc-cr3-A .feature-card-en-copy,
.fc-dr5-A .feature-card-en-copy {
    --en-mask-solid: 55%;
    --en-mask-fade: 78%;
}

.fc-cr3-C .feature-card-en-copy,
.fc-dr5-C .feature-card-en-copy {
    --en-mask-solid: 54%;
    --en-mask-fade: 77%;
    --en-mask-end-opacity: 0.38;
}

.fc-cr3-D .feature-card-en-copy,
.fc-dr5-D .feature-card-en-copy {
    --en-mask-solid: 62%;
    --en-mask-fade: 86%;
    --en-mask-end-opacity: 0.54;
}

.fc-cr3-E .feature-card-en-copy {
    --en-mask-solid: 58%;
    --en-mask-fade: 80%;
    --en-mask-end-opacity: 0.26;
}

.fc-cr3-F .feature-card-en-copy {
    --en-mask-solid: 60%;
    --en-mask-fade: 82%;
    --en-mask-end-opacity: 0.24;
}

.fc-cr3-G .feature-card-en-copy,
.fc-dr5-G .feature-card-en-copy {
    --en-mask-solid: 62%;
    --en-mask-fade: 84%;
    --en-mask-end-opacity: 0.44;
}

.fc-cr3-H .feature-card-en-copy {
    --en-mask-solid: 62%;
    --en-mask-fade: 84%;
    --en-mask-end-opacity: 0.68;
}

.fc-cr3-I .feature-card-en-copy {
    --en-mask-solid: 48%;
    --en-mask-fade: 68%;
    --en-mask-end-opacity: 0.22;
}

.fc-dr5-I2 .feature-card-en-copy {
    --en-mask-solid: 44%;
    --en-mask-fade: 62%;
    --en-mask-end-opacity: 0.24;
}

.fc-dr5-B .feature-card-en-copy {
    --en-mask-solid: 52%;
    --en-mask-fade: 72%;
    --en-mask-end-opacity: 0.24;
}

.fc-dr5-I1 .feature-card-en-copy {
    --en-mask-solid: 42%;
    --en-mask-fade: 58%;
    --en-mask-end-opacity: 0.2;
}

.fc-dr5-F .feature-card-en-copy {
    --en-mask-solid: 44%;
    --en-mask-fade: 62%;
    --en-mask-end-opacity: 0.24;
}

.fc-dr5-H .feature-card-en-copy {
    --en-mask-solid: 58%;
    --en-mask-fade: 78%;
    --en-mask-end-opacity: 0.28;
}

.fc-dr5-E .feature-card-en-copy {
    --en-mask-solid: 54%;
    --en-mask-fade: 76%;
    --en-mask-end-opacity: 0.32;
}

.subtle-live-layer {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    border-radius: inherit;
    display: none;
    opacity: 0;
    pointer-events: none;
    transform: translateZ(24px);
    transition: opacity 0.42s ease;
}

.feature-card-live-subtle:hover .subtle-live-layer,
.feature-card-live-subtle:focus-visible .subtle-live-layer {
    opacity: 0;
}

.remote-live .subtle-live-layer {
    display: block;
    opacity: 1;
    z-index: 7;
}

.remote-live:hover .subtle-live-layer,
.remote-live:focus-visible .subtle-live-layer {
    opacity: 1;
}

.remote-live {
    cursor: pointer;
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        filter 0.28s ease;
}

.remote-live:hover,
.remote-live:focus-visible {
    transform: translateY(-2px);
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.12);
    filter: saturate(1.03);
}

.remote-sync-demo {
    position: absolute;
    right: 2.8%;
    bottom: 1.2%;
    width: 132px;
    height: 132px;
    z-index: 5;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remote-sync-demo svg {
    width: 90px;
    height: 90px;
    overflow: visible;
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.32s ease;
}

.remote-device,
.remote-hub {
    fill: rgba(243, 246, 250, 0.34);
    stroke: rgba(251, 252, 255, 0.98);
}

.remote-device {
    opacity: 0.78;
    transform-origin: center center;
}

.remote-device-left {
    animation-delay: 0s;
}

.remote-device-right {
    animation-delay: 0.22s;
}

.remote-hub {
    opacity: 0.9;
    fill: rgba(239, 243, 248, 0.82);
}

.remote-bridge {
    fill: none;
    stroke: rgba(245, 249, 253, 0.72);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-dasharray: 2 3;
}

.remote-transfer {
    fill: rgba(246, 250, 255, 0);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.remote-live:hover .remote-sync-demo svg,
.remote-live:focus-visible .remote-sync-demo svg {
    transform: translateY(-1px) scale(1.04);
}

.remote-live:hover .remote-device,
.remote-live:focus-visible .remote-device {
    opacity: 1;
    fill: rgba(182, 248, 255, 0.32);
    stroke: rgba(255, 255, 255, 1);
}

.remote-live:hover .remote-hub,
.remote-live:focus-visible .remote-hub {
    opacity: 1;
}

.remote-live:hover .remote-bridge,
.remote-live:focus-visible .remote-bridge {
    stroke: rgba(118, 255, 214, 1);
    stroke-width: 2.4;
    stroke-dasharray: 1 1.8;
    animation: remoteBridgeDash 1.4s linear infinite;
}

.remote-live:hover .remote-transfer,
.remote-live:focus-visible .remote-transfer {
    opacity: 1;
    fill: rgba(118, 255, 214, 1);
    filter: drop-shadow(0 0 6px rgba(118, 255, 214, 0.7));
    animation: remoteTransferFlow 1.3s ease-in-out infinite;
}

.safety-helmet-layer {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    transform: translateZ(26px);
}

.safety-helmet {
    position: absolute;
    left: 33.8%;
    top: 16%;
    width: 14.2%;
    height: 19%;
    opacity: 0;
    transform: translate(-50%, -42%) translateY(-10px) scale(0.86) rotate(-5deg);
    transform-origin: 50% 92%;
    filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.22));
    transition:
        opacity 0.28s ease,
        transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}

.helmet-dome {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 12%;
    height: 56%;
    border-radius: 999px 999px 42% 42%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 42%),
        linear-gradient(135deg, #04e6ff 0%, #00c8ff 42%, #0b7dff 100%);
    box-shadow: inset 0 -4px 8px rgba(0, 80, 150, 0.2);
}

.helmet-ridge {
    position: absolute;
    left: 45%;
    top: 13%;
    width: 10%;
    height: 56%;
    border-radius: 999px;
    background: rgba(202, 252, 255, 0.58);
}

.helmet-brim {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22%;
    height: 21%;
    border-radius: 999px;
    background: linear-gradient(180deg, #04e6ff, #0b7dff);
    box-shadow: inset 0 -2px 4px rgba(0, 70, 150, 0.24);
}

.safety-live:hover .safety-helmet,
.safety-live:focus-visible .safety-helmet {
    opacity: 1;
    transform: translate(-50%, -42%) translateY(0) scale(1) rotate(-2deg);
}

.safety-route {
    position: absolute;
    inset: 0;
}

.safety-route path {
    fill: none;
    stroke: rgba(143, 255, 214, 0.82);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    filter: drop-shadow(0 0 8px rgba(31, 255, 198, 0.42));
}

.safety-route circle {
    fill: rgba(143, 255, 214, 0.92);
    opacity: 0;
}

.safety-live:hover .safety-route path,
.safety-live:focus-visible .safety-route path {
    animation: featureLineDraw 1.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.safety-live:hover .safety-route circle,
.safety-live:focus-visible .safety-route circle {
    animation: featureNodePulse 1.7s ease-out forwards;
}

.scan-live .subtle-live-layer {
    display: block;
    opacity: 0;
}

.scan-live:hover .subtle-live-layer,
.scan-live:focus-visible .subtle-live-layer {
    opacity: 1;
}

.scan-live {
    cursor: pointer;
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        filter 0.28s ease;
}

.scan-live:hover,
.scan-live:focus-visible {
    transform: translateY(-2px);
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.16),
        0 0 0 1px rgba(143, 255, 214, 0.10);
    filter: saturate(1.04);
}

.scan-map-layer {
    position: absolute;
    inset: 0;
    z-index: 7;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    transform: translateZ(24px);
}

.scan-map-mask {
    position: absolute;
    right: 0;
    top: 0;
    width: 36%;
    height: 100%;
    background: linear-gradient(90deg, rgba(36, 37, 41, 0), #242529 16%, #242529 100%);
    z-index: 1;
}

.scan-map-visual {
    position: absolute;
    right: 3.9%;
    top: 24%;
    width: 24.5%;
    aspect-ratio: 1;
    z-index: 2;
    opacity: 1;
}

.scan-map-ring {
    position: absolute;
    inset: 0;
    border-radius: 13px;
    border: 1.3px solid rgba(143, 255, 214, 0.42);
    box-shadow:
        inset 0 0 18px rgba(143, 255, 214, 0.075),
        0 0 0 1px rgba(255, 255, 255, 0.045),
        0 0 12px rgba(143, 255, 214, 0.08);
}

.scan-map-ring.ring-inner {
    inset: 18%;
    border-radius: 9px;
    border-color: rgba(143, 255, 214, 0.28);
    border-style: dashed;
}

.scan-map-sweep {
    position: absolute;
    left: 0;
    top: 4%;
    width: 28%;
    height: 92%;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(143, 255, 214, 0.08) 22%, rgba(230, 255, 249, 0.56) 50%, rgba(143, 255, 214, 0.08) 78%, transparent);
    opacity: 0.28;
    transform: translateX(-18%);
    filter: drop-shadow(0 0 8px rgba(143, 255, 214, 0.16));
    z-index: 2;
}

.scan-map-sweep::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 1.2px;
    height: 100%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, transparent, rgba(230, 255, 249, 0.9) 18%, rgba(230, 255, 249, 0.78) 82%, transparent);
}

.scan-map-lines {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: visible;
}

.scan-map-path {
    fill: none;
    stroke: rgba(143, 255, 214, 0.48);
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 96;
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 5px rgba(143, 255, 214, 0.16));
    position: relative;
}

.scan-map-node {
    position: absolute;
    z-index: 4;
    width: 8.5%;
    aspect-ratio: 1;
    border-radius: 999px;
    background: rgba(172, 255, 232, 0.82);
    opacity: 0.78;
    box-shadow: 0 0 9px rgba(143, 255, 214, 0.3);
}

.scan-map-node.node-a {
    left: 27%;
    top: 56%;
}

.scan-map-node.node-b {
    left: 57%;
    top: 35%;
}

.scan-map-node.node-c {
    left: 71%;
    top: 64%;
}

.scan-live:hover .scan-map-sweep,
.scan-live:focus-visible .scan-map-sweep,
.scan-live.is-card-active .scan-map-sweep {
    animation: scanMapSweep 2.55s linear infinite;
    opacity: 0.82;
}

.scan-live:hover .scan-map-path,
.scan-live:focus-visible .scan-map-path,
.scan-live.is-card-active .scan-map-path {
    stroke: rgba(143, 255, 214, 0.74);
    stroke-dashoffset: 96;
    animation: scanMapTrace 2.55s cubic-bezier(0.32, 0.72, 0.2, 1) infinite;
}

.scan-live:hover .scan-map-path.path-b,
.scan-live:focus-visible .scan-map-path.path-b,
.scan-live.is-card-active .scan-map-path.path-b {
    animation-delay: 0.16s;
}

.scan-live:hover .scan-map-path.path-c,
.scan-live:focus-visible .scan-map-path.path-c,
.scan-live.is-card-active .scan-map-path.path-c {
    animation-delay: 0.32s;
}

.scan-live:hover .scan-map-node,
.scan-live:focus-visible .scan-map-node,
.scan-live.is-card-active .scan-map-node {
    animation: scanMapNode 2.55s ease-in-out infinite;
}

.scan-live:hover .scan-map-node.node-b,
.scan-live:focus-visible .scan-map-node.node-b,
.scan-live.is-card-active .scan-map-node.node-b {
    animation-delay: 0.18s;
}

.scan-live:hover .scan-map-node.node-c,
.scan-live:focus-visible .scan-map-node.node-c,
.scan-live.is-card-active .scan-map-node.node-c {
    animation-delay: 0.36s;
}

.dr5-radar-live .subtle-live-layer {
    display: block;
    opacity: 0;
    z-index: 7;
}

.dr5-radar-live:hover .subtle-live-layer,
.dr5-radar-live:focus-visible .subtle-live-layer,
.dr5-radar-live.is-card-active .subtle-live-layer {
    opacity: 1;
}

.dr5-radar-ring,
.dr5-radar-sweep {
    position: absolute;
    right: 17%;
    top: -1%;
    width: 19%;
    aspect-ratio: 1;
    border-radius: 999px;
    pointer-events: none;
}

.dr5-radar-ring {
    border: 1px solid rgba(143, 255, 214, 0.28);
    box-shadow:
        inset 0 0 0 1px rgba(143, 255, 214, 0.06),
        0 0 18px rgba(143, 255, 214, 0.10);
}

.dr5-radar-ring-inner::after {
    content: "";
    position: absolute;
    inset: 24%;
    border-radius: inherit;
    border: 1px solid rgba(143, 255, 214, 0.24);
}

.dr5-radar-sweep {
    background: conic-gradient(from 226deg,
            transparent 0 48deg,
            rgba(143, 255, 214, 0.08) 52deg,
            rgba(143, 255, 214, 0.68) 59deg,
            rgba(143, 255, 214, 0.12) 68deg,
            transparent 76deg 360deg);
    mix-blend-mode: screen;
    opacity: 0.9;
}

.dr5-radar-live:hover .dr5-radar-ring,
.dr5-radar-live:focus-visible .dr5-radar-ring,
.dr5-radar-live.is-card-active .dr5-radar-ring {
    animation: featureRadarPulse 2.2s ease-out infinite;
}

.dr5-radar-live:hover .dr5-radar-sweep,
.dr5-radar-live:focus-visible .dr5-radar-sweep,
.dr5-radar-live.is-card-active .dr5-radar-sweep {
    animation: featureSweep 2.1s linear infinite;
}

.dr5-load-live .subtle-live-layer,
.dr5-narrow-live .subtle-live-layer,
.dr5-parking-live .subtle-live-layer,
.dr5-range-live .subtle-live-layer,
.dr5-location-live .subtle-live-layer {
    display: block;
    opacity: 0;
    z-index: 7;
}

.dr5-load-live:hover .subtle-live-layer,
.dr5-load-live:focus-visible .subtle-live-layer,
.dr5-narrow-live:hover .subtle-live-layer,
.dr5-narrow-live:focus-visible .subtle-live-layer,
.dr5-parking-live:hover .subtle-live-layer,
.dr5-parking-live:focus-visible .subtle-live-layer,
.dr5-range-live:hover .subtle-live-layer,
.dr5-range-live:focus-visible .subtle-live-layer,
.dr5-location-live:hover .subtle-live-layer,
.dr5-location-live:focus-visible .subtle-live-layer,
.dr5-load-live.is-card-active .subtle-live-layer,
.dr5-narrow-live.is-card-active .subtle-live-layer,
.dr5-parking-live.is-card-active .subtle-live-layer,
.dr5-range-live.is-card-active .subtle-live-layer,
.dr5-location-live.is-card-active .subtle-live-layer {
    opacity: 1;
}

.dr5-load-live .subtle-live-layer {
    opacity: 1;
}

.dr5-range-live .subtle-live-layer {
    opacity: 1;
}

.dr5-parking-live {
    background: #242529;
}

.dr5-parking-live>img {
    opacity: 0;
}

.dr5-parking-live .subtle-live-layer {
    opacity: 1;
    background:
        radial-gradient(circle at 76% 48%, rgba(36, 229, 184, 0.06), transparent 28%),
        #242529;
}

.dr5-load-icon-mask {
    position: absolute;
    left: 35.7%;
    top: 18.2%;
    width: 28.6%;
    height: 30%;
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.035), transparent 42%),
        #242529;
    z-index: 2;
}

.dr5-load-weight {
    position: absolute;
    left: 50%;
    top: 33.7%;
    width: 20.4%;
    aspect-ratio: 1.08;
    transform: translate(-50%, -50%);
    transform-origin: 50% 82%;
    z-index: 4;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.18));
}

.dr5-load-weight-handle {
    position: absolute;
    left: 50%;
    top: -8%;
    width: 36%;
    height: 31%;
    border: 7px solid #ffffff;
    border-bottom: 0;
    border-radius: 999px 999px 0 0;
    transform: translateX(-50%);
    box-sizing: border-box;
}

.dr5-load-weight-body {
    position: absolute;
    inset: 19% 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11% 11% 16% 16%;
    background: #ffffff;
    color: #242529;
    font-size: clamp(16px, 1.75vw, 29px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
}

.dr5-load-platform {
    position: absolute;
    left: 37%;
    top: 49%;
    width: 26%;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(0, 211, 255, 0.16), rgba(143, 255, 214, 0.74), rgba(0, 211, 255, 0.16));
    box-shadow: 0 0 16px rgba(143, 255, 214, 0.18);
    transform-origin: center;
    opacity: 0;
    z-index: 3;
}

.dr5-load-gauge {
    position: absolute;
    top: 30%;
    width: 3px;
    height: 16%;
    border-radius: 999px;
    background: rgba(143, 255, 214, 0.48);
    box-shadow: 0 0 12px rgba(143, 255, 214, 0.18);
    opacity: 0;
    z-index: 3;
}

.gauge-left {
    left: 39%;
}

.gauge-right {
    right: 39%;
}

.dr5-load-spark {
    position: absolute;
    top: 47%;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #8fffd6;
    opacity: 0;
    box-shadow: 0 0 14px rgba(143, 255, 214, 0.55);
    z-index: 5;
}

.dr5-load-live:hover .dr5-load-weight,
.dr5-load-live:focus-visible .dr5-load-weight,
.dr5-load-live.is-card-active .dr5-load-weight {
    animation: dr5LoadWeight 1.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.spark-one {
    left: 42%;
}

.spark-two {
    right: 42%;
    animation-delay: 0.18s;
}

.dr5-load-live:hover .dr5-load-platform,
.dr5-load-live:focus-visible .dr5-load-platform,
.dr5-load-live.is-card-active .dr5-load-platform {
    animation: dr5LoadPlatform 1.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.dr5-load-live:hover .dr5-load-gauge,
.dr5-load-live:focus-visible .dr5-load-gauge,
.dr5-load-live.is-card-active .dr5-load-gauge {
    animation: dr5LoadGauge 1.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.dr5-load-live:hover .dr5-load-spark,
.dr5-load-live:focus-visible .dr5-load-spark,
.dr5-load-live.is-card-active .dr5-load-spark {
    animation: dr5LoadSpark 1.8s ease-in-out infinite;
}

.dr5-narrow-guide {
    position: absolute;
    left: 43%;
    right: 4%;
    top: 50%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(143, 255, 214, 0.82), transparent);
    box-shadow: 0 0 14px rgba(143, 255, 214, 0.18);
    transform: translateY(-50%);
}

.dr5-narrow-pulse {
    position: absolute;
    left: 48%;
    top: 50%;
    width: 34px;
    height: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(143, 255, 214, 0.12), rgba(143, 255, 214, 0.70));
    box-shadow: 0 0 18px rgba(143, 255, 214, 0.24);
    transform: translateY(-50%);
}

.dr5-narrow-edge {
    position: absolute;
    left: 43%;
    right: 4%;
    height: 1px;
    border-radius: 999px;
    background: rgba(232, 244, 255, 0.28);
}

.edge-top {
    top: 30%;
}

.edge-bottom {
    bottom: 30%;
}

.dr5-narrow-live:hover .dr5-narrow-pulse,
.dr5-narrow-live:focus-visible .dr5-narrow-pulse,
.dr5-narrow-live.is-card-active .dr5-narrow-pulse {
    animation: dr5NarrowPass 2.15s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.dr5-narrow-live:hover .dr5-narrow-guide,
.dr5-narrow-live:focus-visible .dr5-narrow-guide,
.dr5-narrow-live.is-card-active .dr5-narrow-guide {
    animation: dr5GuideGlow 2.15s ease-in-out infinite;
}

.dr5-parking-card {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
}

.dr5-parking-title {
    position: absolute;
    left: 13.8%;
    top: 37%;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: clamp(22px, 2.8vw, 41px);
    font-weight: 720;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
    text-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.dr5-parking-visual {
    position: absolute;
    right: 4.5%;
    top: 21%;
    width: 48%;
    height: 76%;
}

.dr5-parking-slots {
    position: absolute;
    right: 1.5%;
    bottom: -3%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    width: 70%;
    height: 40%;
    opacity: 0.7;
}

.dr5-parking-slots span {
    display: grid;
    place-items: center;
    border-radius: 3px 3px 0 0;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(255, 255, 255, 0.18);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.dr5-parking-slots span:nth-child(5) {
    background: rgba(38, 214, 176, 0.13);
    color: rgba(177, 255, 232, 0.34);
    box-shadow: inset 0 1px 0 rgba(154, 255, 224, 0.08);
}

.dr5-parking-live:hover .dr5-parking-slots span:nth-child(5),
.dr5-parking-live:focus-visible .dr5-parking-slots span:nth-child(5),
.dr5-parking-live.is-card-active .dr5-parking-slots span:nth-child(5) {
    animation: dr5ParkingSlot 3.25s ease-in-out infinite;
}

.dr5-parking-svg {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.dr5-parking-path-base,
.dr5-parking-path-live {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dr5-parking-path-base {
    stroke: rgba(38, 214, 176, 0.31);
    stroke-width: 17;
}

.dr5-parking-path-live {
    stroke: rgba(154, 255, 224, 0.88);
    stroke-width: 3.4;
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    filter: drop-shadow(0 0 8px rgba(143, 255, 214, 0.32));
}

.dr5-parking-module {
    position: absolute;
    left: 10%;
    top: 24%;
    z-index: 4;
    width: 72px;
    height: 33px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #f7f8f8;
    color: #2a2d31;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.02em;
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%) rotate(0deg) scale(0.92);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.dr5-parking-module::after {
    content: "";
    position: absolute;
    right: 7px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: rgba(38, 214, 176, 0.76);
    transform: translateY(-50%);
    box-shadow: 0 0 8px rgba(143, 255, 214, 0.28);
}

.dr5-parking-lock {
    position: absolute;
    left: 73.5%;
    bottom: 9%;
    z-index: 5;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 15px solid rgba(154, 255, 224, 0.94);
    opacity: 0.72;
    filter: drop-shadow(0 0 8px rgba(143, 255, 214, 0.24));
}

.dr5-parking-live:hover .dr5-parking-path-live,
.dr5-parking-live:focus-visible .dr5-parking-path-live,
.dr5-parking-live.is-card-active .dr5-parking-path-live {
    animation: dr5ParkingDraw 3.25s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.dr5-parking-live:hover .dr5-parking-module,
.dr5-parking-live:focus-visible .dr5-parking-module,
.dr5-parking-live.is-card-active .dr5-parking-module {
    animation: dr5ParkingModule 3.25s cubic-bezier(0.42, 0, 0.18, 1) infinite;
}

.dr5-parking-live:hover .dr5-parking-lock,
.dr5-parking-live:focus-visible .dr5-parking-lock,
.dr5-parking-live.is-card-active .dr5-parking-lock {
    animation: dr5ParkingLock 3.25s ease-in-out infinite;
}

.dr5-location-ring {
    position: absolute;
    left: 83%;
    top: 37%;
    width: 26%;
    aspect-ratio: 1;
    border-radius: 999px;
    border: 2px solid rgba(46, 129, 255, 0.72);
    opacity: 0;
    background: radial-gradient(circle, rgba(46, 129, 255, 0.16) 0 8%, transparent 40%);
    box-shadow:
        inset 0 0 0 1px rgba(46, 129, 255, 0.16),
        0 0 24px rgba(46, 129, 255, 0.34);
    transform: translate(-50%, -50%) scale(0.58);
}

.dr5-location-ring.ring-b {
    left: 83%;
    top: 37%;
    width: 36%;
}

.dr5-location-live:hover .dr5-location-ring,
.dr5-location-live:focus-visible .dr5-location-ring,
.dr5-location-live.is-card-active .dr5-location-ring {
    animation: dr5LocationPulse 1.55s ease-out infinite;
}

.dr5-location-live:hover .ring-b,
.dr5-location-live:focus-visible .ring-b,
.dr5-location-live.is-card-active .ring-b {
    animation-delay: 0.24s;
}

.dr5-range-number-mask {
    position: absolute;
    left: 7.4%;
    top: 11.6%;
    width: 66%;
    height: 32%;
    border-radius: 16px;
    background:
        radial-gradient(circle at 42% 52%, rgba(255, 255, 255, 0.018), transparent 52%),
        #242529;
    z-index: 2;
}

.dr5-range-number {
    position: absolute;
    left: 15.4%;
    top: 19.1%;
    display: inline-grid;
    line-height: 1;
    letter-spacing: -0.02em;
    font-size: clamp(42px, 4.75vw, 65px);
    font-weight: 800;
    white-space: nowrap;
    z-index: 4;
}

.dr5-range-number-base,
.dr5-range-number-fill {
    grid-area: 1 / 1;
    display: inline-block;
    white-space: nowrap;
    line-height: 1;
    letter-spacing: inherit;
}

.dr5-range-number-base {
    color: #ffffff;
}

.dr5-range-number-fill {
    color: transparent;
    background: linear-gradient(180deg, #c9fff0 0%, #38f5b2 54%, #00d3ff 100%);
    background-size: 100% 135%;
    background-position: 0 100%;
    -webkit-background-clip: text;
    background-clip: text;
    clip-path: inset(100% 0 0 0);
    filter: drop-shadow(0 0 9px rgba(56, 245, 178, 0.16));
    will-change: clip-path, background-position;
}

.dr5-range-live:hover .dr5-range-number-fill,
.dr5-range-live:focus-visible .dr5-range-number-fill,
.dr5-range-live.is-card-active .dr5-range-number-fill {
    animation: dr5RangeNumberFill 3.4s cubic-bezier(0.38, 0, 0.18, 1) infinite alternate;
}

.terrain-breathe-layer {
    position: absolute;
    inset: 0;
    z-index: 7;
    opacity: 0;
    transition: opacity 0.22s ease;
    pointer-events: none;
}

.terrain-breathe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    mix-blend-mode: screen;
    filter: saturate(1.45) brightness(1.18) contrast(1.08);
    transform-origin: center;
    transform-box: fill-box;
    animation: terrainSegmentBreath 4.8s linear infinite;
    animation-play-state: paused;
}

.terrain-breathe-1 {
    transform: scale(1.002);
    animation-delay: 0s;
}

.terrain-breathe-2 {
    transform: scale(1.002);
    animation-delay: -1s;
}

.terrain-breathe-3 {
    transform: scale(1.002);
    animation-delay: -2s;
}

.terrain-breathe-4 {
    transform: scale(1.28);
    transform-origin: 100% 100%;
    animation-delay: -3s;
}

.terrain-breathe-5 {
    transform: scale(1.46);
    transform-origin: 100% 100%;
    animation-delay: -4s;
}

.terrain-live:hover .terrain-breathe-layer,
.terrain-live:focus-visible .terrain-breathe-layer {
    opacity: 1;
}

.terrain-live:hover .terrain-breathe,
.terrain-live:focus-visible .terrain-breathe {
    animation-play-state: running;
    opacity: 0.42;
    filter: saturate(1.75) brightness(1.7) contrast(1.14);
}

.terrain-live:hover,
.terrain-live:focus-visible {
    transform: translateY(-2px);
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.16),
        0 0 0 1px rgba(143, 255, 214, 0.10);
    filter: saturate(1.04);
}

.battery-shell {
    position: absolute;
    right: 9%;
    top: 28%;
    width: 22%;
    height: 31%;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 8px;
}

.battery-live .subtle-live-layer {
    display: block;
    opacity: 1;
    z-index: 7;
}

.battery-live:hover .subtle-live-layer,
.battery-live:focus-visible .subtle-live-layer {
    display: block;
    opacity: 1;
}

.battery-live .battery-shell,
.battery-live .battery-fill {
    display: none;
}

.battery-shell::after {
    content: "";
    position: absolute;
    right: -10%;
    top: 32%;
    width: 8%;
    height: 36%;
    border-radius: 0 4px 4px 0;
    background: rgba(255, 255, 255, 0.9);
}

.battery-fill {
    position: absolute;
    left: 10%;
    bottom: 10%;
    width: 80%;
    height: 16%;
    border-radius: 5px;
    background: linear-gradient(180deg, #8fffd6, #00d3ff);
    box-shadow: 0 0 12px rgba(143, 255, 214, 0.35);
}

.charge-spark {
    position: absolute;
    left: 75.99%;
    top: 33.33%;
    width: 11.19%;
    height: 8.34%;
    background: transparent;
    opacity: 0;
    transform: translateZ(0);
    filter: drop-shadow(0 0 7px rgba(143, 255, 214, 0.38));
    overflow: hidden;
    transition: opacity 0.28s ease;
    -webkit-mask-image: url("../assets/CR3/6-lightning-mask-crop.png");
    mask-image: url("../assets/CR3/6-lightning-mask-crop.png");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.charge-spark::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #8fffd6, #18e6a6);
    transform: scaleY(0);
    transform-origin: 50% 100%;
}

.battery-live:hover .battery-fill,
.battery-live:focus-visible .battery-fill {
    animation: featureBatteryFill 1.8s ease-in-out infinite;
}

.battery-live:hover .charge-spark,
.battery-live:focus-visible .charge-spark {
    opacity: 0.95;
}

.battery-live:hover .charge-spark::before,
.battery-live:focus-visible .charge-spark::before {
    animation: featureLightningCharge 2.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.environment-live {
    overflow: hidden;
}

.environment-broom-layer {
    position: absolute;
    right: 6.6%;
    top: 50%;
    width: 21%;
    max-width: 64px;
    z-index: 8;
    pointer-events: none;
    transform: translate3d(0, -50%, 0);
}

.environment-broom {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0.94;
    transform: translate3d(0, 0, 0) rotate(-10deg) scale(1.08);
    transform-origin: 72% 28%;
    filter: drop-shadow(0 0 1px rgba(87, 255, 223, 0.04));
    will-change: transform, opacity, filter;
}

.environment-live:hover .environment-broom,
.environment-live:focus-visible .environment-broom {
    animation: featureBroomCornerPulse 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.climb-live .subtle-live-layer {
    display: block;
    opacity: 1;
    z-index: 7;
}

.climb-live:hover .subtle-live-layer,
.climb-live.is-card-active .subtle-live-layer,
.climb-live:focus .subtle-live-layer,
.climb-live:focus-visible .subtle-live-layer {
    opacity: 1;
}

.climb-stage {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.34s ease;
}

.climb-live:hover .climb-stage,
.climb-live.is-card-active .climb-stage,
.climb-live:focus .climb-stage,
.climb-live:focus-visible .climb-stage {
    opacity: 1;
}

.climb-stage-mask {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 45% 36%, rgba(0, 211, 255, 0.13), transparent 40%),
        radial-gradient(circle at 64% 62%, rgba(143, 255, 214, 0.1), transparent 44%),
        #222428;
}

.climb-ramp {
    position: absolute;
    left: 17%;
    bottom: 30%;
    width: 68%;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(0, 211, 255, 0.9), rgba(143, 255, 214, 0.78));
    box-shadow: 0 0 18px rgba(0, 211, 255, 0.24);
    transform: rotate(-15deg);
    transform-origin: left center;
    z-index: 2;
}

.climb-ramp::after {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    top: 100%;
    height: 12px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(180deg, rgba(0, 211, 255, 0.16), transparent);
}

.climb-ramp-glow {
    position: absolute;
    inset: -14px -8px;
    border-radius: 999px;
    background: radial-gradient(closest-side, rgba(0, 211, 255, 0.2), transparent 72%);
    opacity: 0.82;
}

.climb-tread {
    position: absolute;
    top: -9px;
    width: 3px;
    height: 19px;
    border-radius: 999px;
    background: rgba(232, 244, 255, 0.48);
}

.tread-one {
    left: 24%;
}

.tread-two {
    left: 50%;
}

.tread-three {
    left: 76%;
}

.climb-caption {
    position: absolute;
    left: 18%;
    bottom: 13%;
    color: rgba(232, 244, 255, 0.72);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: clamp(14px, 1.55vw, 19px);
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0;
    z-index: 3;
}

.climb-grade {
    position: absolute;
    right: 17%;
    top: 24%;
    color: rgba(143, 255, 214, 0.82);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: clamp(11px, 1.25vw, 15px);
    font-weight: 700;
    letter-spacing: 0;
    z-index: 3;
}

.climb-strong {
    --climb-strong-size: clamp(34px, 4.9vw, 52px);
    position: absolute;
    left: 5%;
    bottom: 36%;
    display: grid;
    place-items: center;
    width: var(--climb-strong-size);
    height: var(--climb-strong-size);
    color: #00d3ff;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: calc(var(--climb-strong-size) * 0.72);
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 0 16px rgba(0, 211, 255, 0.2);
    transform: translate(0, 0);
    transform-origin: 50% 100%;
    z-index: 4;
}

.climb-live:hover .climb-strong,
.climb-live.is-card-active .climb-strong,
.climb-live:focus .climb-strong,
.climb-live:focus-visible .climb-strong {
    animation: featureClimbStrong 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.climb-live:hover .climb-tread,
.climb-live.is-card-active .climb-tread,
.climb-live:focus .climb-tread,
.climb-live:focus-visible .climb-tread {
    animation: featureTreadGrip 1.7s ease-in-out infinite;
}

.remote-sync {
    position: absolute;
    right: 12%;
    bottom: 15%;
    width: 110px;
    height: 92px;
    z-index: 5;
}

.perception-ring {
    position: absolute;
    right: 11.2%;
    top: 11.4%;
    width: 31%;
    aspect-ratio: 1;
    border-radius: 999px;
    border: 1px solid rgba(143, 255, 214, 0.22);
    opacity: 0.22;
    pointer-events: none;
}

.ring-two {
    right: 4.3%;
    top: -6.2%;
    width: 45%;
    opacity: 0.42;
}

.perception-sweep {
    position: absolute;
    right: 11.2%;
    top: 11.4%;
    width: 31%;
    aspect-ratio: 1;
    border-radius: 999px;
    background: conic-gradient(from 220deg,
            transparent 0 52deg,
            rgba(143, 255, 214, 0.04) 54deg,
            rgba(143, 255, 214, 0.72) 58deg,
            rgba(143, 255, 214, 0.10) 64deg,
            transparent 70deg 360deg);
    opacity: 0.42;
    filter: blur(0.2px);
    transform-origin: 50% 50%;
    mix-blend-mode: screen;
}

.perception-dot {
    position: absolute;
    right: 26.1%;
    top: 48.5%;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #8fffd6;
    box-shadow: 0 0 16px rgba(143, 255, 214, 0.6);
}

.perception-live .subtle-live-layer {
    display: block;
    opacity: 0;
    transition: opacity 0.24s ease;
    pointer-events: none;
    z-index: 7;
}

.perception-live:hover .subtle-live-layer,
.perception-live:focus-visible .subtle-live-layer {
    opacity: 1;
}

.perception-live:hover .perception-ring,
.perception-live:focus-visible .perception-ring {
    animation: featureRadarPulse 2.2s ease-out infinite;
}

.perception-live:hover .perception-sweep,
.perception-live:focus-visible .perception-sweep {
    animation: featureSweep 2.6s linear infinite;
}

.perception-live:hover .perception-dot,
.perception-live:focus-visible .perception-dot {
    animation: featureFloatDot 2.2s ease-in-out infinite;
}

.perception-live {
    overflow: hidden;
}

.perception-litter {
    position: absolute;
    opacity: 0;
    filter: drop-shadow(0 0 8px rgba(143, 255, 214, 0.18));
    pointer-events: none;
}

.perception-live:hover .perception-litter,
.perception-live:focus-visible .perception-litter {
    animation: featurePerceptionReveal 0.76s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--reveal-delay);
}

.litter-paper {
    left: 58%;
    top: 18%;
    width: 20px;
    height: 24px;
    border-radius: 2px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0 72%, rgba(226, 232, 236, 0.96) 72% 100%);
    --start-x: 74px;
    --start-y: -24px;
    --start-rot: -18deg;
    --end-rot: 12deg;
    --reveal-delay: 0.86s;
}

.litter-paper::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 34%;
    height: 34%;
    border-top-right-radius: 2px;
    background: linear-gradient(135deg, rgba(210, 215, 218, 0.92), rgba(255, 255, 255, 0.2));
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.litter-leaf {
    left: 83%;
    top: 27%;
    width: 26px;
    height: 18px;
    border-radius: 0 100% 0 100%;
    background: linear-gradient(135deg, rgba(128, 230, 92, 0.98), rgba(39, 156, 77, 0.96));
    --start-x: 0px;
    --start-y: -8px;
    --start-rot: 22deg;
    --end-rot: -22deg;
    --reveal-delay: 1.08s;
}

.litter-leaf::before {
    content: "";
    position: absolute;
    left: 42%;
    top: 10%;
    width: 1px;
    height: 78%;
    background: rgba(233, 255, 234, 0.55);
    transform: rotate(28deg);
    transform-origin: center;
}

.litter-cigarette {
    left: 80%;
    top: 66%;
    width: 38px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg,
            rgba(247, 243, 233, 0.98) 0 58%,
            rgba(226, 166, 91, 0.96) 58% 78%,
            rgba(176, 118, 64, 0.98) 78% 100%);
    --start-x: 0px;
    --start-y: 8px;
    --start-rot: -10deg;
    --end-rot: 9deg;
    --reveal-delay: 1.3s;
}

.litter-cigarette::before {
    content: "";
    position: absolute;
    left: -3px;
    top: 2px;
    width: 9px;
    height: 7px;
    border-radius: 999px 0 0 999px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 213, 157, 0.94));
}

.litter-cigarette::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 2px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 167, 101, 0.62);
    box-shadow: 0 0 8px rgba(255, 167, 101, 0.42);
}

@keyframes featureLineDraw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes featureNodePulse {

    0%,
    35% {
        opacity: 0;
        transform: scale(0.5);
    }

    70%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes featureRipple {
    0% {
        opacity: 0.65;
        transform: scale(0.62);
    }

    100% {
        opacity: 0;
        transform: scale(1.32);
    }
}

@keyframes featureSweep {
    to {
        transform: rotate(360deg);
    }
}

@keyframes scanMapSweep {
    0% {
        transform: translateX(-30%);
    }

    100% {
        transform: translateX(285%);
    }
}

@keyframes scanMapTrace {
    0% {
        stroke-dashoffset: 96;
        opacity: 0.25;
    }

    44% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    78%,
    100% {
        stroke-dashoffset: 0;
        opacity: 0.46;
    }
}

@keyframes scanMapNode {

    0%,
    28% {
        transform: scale(0.75);
        opacity: 0.38;
    }

    48% {
        transform: scale(1.18);
        opacity: 0.95;
        box-shadow: 0 0 12px rgba(143, 255, 214, 0.42);
    }

    78%,
    100% {
        transform: scale(0.9);
        opacity: 0.55;
    }
}

@keyframes featurePerceptionReveal {
    0% {
        opacity: 0;
        transform: translate(var(--start-x), var(--start-y)) scale(0.25) rotate(var(--start-rot));
        filter: blur(4px) drop-shadow(0 0 0 rgba(143, 255, 214, 0));
    }

    58% {
        opacity: 1;
        transform: translate(calc(var(--start-x) * 0.16), calc(var(--start-y) * 0.16)) scale(1.05) rotate(calc(var(--end-rot) * 0.6));
        filter: blur(0) drop-shadow(0 0 10px rgba(143, 255, 214, 0.22));
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(var(--end-rot));
        filter: blur(0) drop-shadow(0 0 8px rgba(143, 255, 214, 0.18));
    }
}

@keyframes featureBroomCornerPulse {

    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-10deg) scale(1);
        opacity: 0.92;
        filter: drop-shadow(0 0 1px rgba(87, 255, 223, 0.04));
    }

    28% {
        transform: translate3d(0.9px, -0.7px, 0) rotate(-6deg) scale(1.03);
        opacity: 1;
        filter: drop-shadow(0 0 2.8px rgba(87, 255, 223, 0.1));
    }

    54% {
        transform: translate3d(1.35px, 0.18px, 0) rotate(-3deg) scale(1.045);
        opacity: 1;
        filter: drop-shadow(0 0 3.3px rgba(87, 255, 223, 0.13));
    }

    78% {
        transform: translate3d(0.4px, -0.3px, 0) rotate(-7deg) scale(1.015);
        opacity: 0.97;
        filter: drop-shadow(0 0 2px rgba(87, 255, 223, 0.08));
    }
}

@keyframes featureBatteryFill {

    0%,
    100% {
        height: 16%;
    }

    50% {
        height: 80%;
    }
}

@keyframes terrainSegmentBreath {

    0%,
    12% {
        opacity: 0.16;
        transform: scale(0.988);
    }

    18% {
        opacity: 1;
        transform: scale(1.12);
    }

    30% {
        opacity: 0.48;
        transform: scale(1.045);
    }

    42%,
    100% {
        opacity: 0.16;
        transform: scale(0.988);
    }
}


@keyframes featureSpark {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.06);
    }
}

@keyframes featureLightningCharge {

    0%,
    8% {
        transform: scaleY(0);
    }

    26% {
        transform: scaleY(0.32);
    }

    48% {
        transform: scaleY(0.72);
    }

    74% {
        transform: scaleY(1);
    }

    100% {
        transform: scaleY(1);
    }
}

@keyframes featureFloatDot {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.6;
    }

    50% {
        transform: translateY(-8px);
        opacity: 1;
    }
}

@keyframes featureClimbStrong {
    0% {
        transform: translate(0, 0) rotate(-1deg);
    }

    48% {
        transform: translate(26px, -7px) rotate(-1deg);
    }

    78% {
        transform: translate(50px, -13px) rotate(-1deg);
    }

    100% {
        transform: translate(75px, -19px) rotate(-1deg);
    }
}

@keyframes featureTreadGrip {

    0%,
    100% {
        opacity: 0.32;
        transform: translateY(0) scaleY(0.72);
    }

    50% {
        opacity: 0.85;
        transform: translateY(-2px) scaleY(1);
    }
}

@keyframes featureNodeGlow {

    0%,
    100% {
        box-shadow: 0 0 0 rgba(143, 255, 214, 0);
    }

    50% {
        box-shadow: 0 0 18px rgba(143, 255, 214, 0.32);
    }
}

@keyframes rotate-sync {

    0%,
    100% {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse-active {

    0%,
    100% {
        opacity: 0.34;
        filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.16));
    }

    50% {
        opacity: 0.72;
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.38));
    }
}

@keyframes remoteBridgeDash {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -10;
    }
}

@keyframes remoteTransferFlow {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.55);
    }

    16% {
        opacity: 1;
        transform: translate(5px, -5px) scale(0.92);
    }

    60% {
        opacity: 1;
        transform: translate(14px, -14px) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(18px, -18px) scale(1.02);
    }
}

@keyframes remotePulseFlowLeft {

    0%,
    100% {
        opacity: 0.18;
        transform: translate(0, 0) scale(0.7);
    }

    22% {
        opacity: 0.92;
        transform: translate(6px, -4px) scale(1);
    }

    62% {
        opacity: 0.5;
        transform: translate(14px, -10px) scale(0.92);
    }
}

@keyframes remotePulseFlowRight {

    0%,
    100% {
        opacity: 0.05;
        transform: translate(0, 0) scale(0.62);
    }

    36% {
        opacity: 0.55;
        transform: translate(-5px, 3px) scale(0.88);
    }

    74% {
        opacity: 0.95;
        transform: translate(-12px, 9px) scale(1);
    }
}

@keyframes featureRadarPulse {
    0% {
        transform: scale(0.88);
        opacity: 0.22;
    }

    50% {
        opacity: 0.75;
    }

    100% {
        transform: scale(1.18);
        opacity: 0.08;
    }
}

@keyframes dr5LoadWeight {
    0%,
    100% {
        transform: translate(-50%, -50%) translateY(0) scale(1);
        filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.18));
    }

    36% {
        transform: translate(-50%, -50%) translateY(8px) scale(1.015, 0.985);
        filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.22));
    }

    62% {
        transform: translate(-50%, -50%) translateY(3px) scale(0.992, 1.008);
        filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.20));
    }
}

@keyframes dr5LoadPlatform {

    0%,
    100% {
        transform: translateY(0) scaleX(0.92);
        opacity: 0.56;
    }

    42% {
        transform: translateY(6px) scaleX(1);
        opacity: 0.98;
    }

    72% {
        transform: translateY(2px) scaleX(0.97);
        opacity: 0.76;
    }
}

@keyframes dr5LoadGauge {

    0%,
    100% {
        transform: scaleY(0.66);
        opacity: 0.38;
    }

    42% {
        transform: scaleY(1);
        opacity: 0.86;
    }
}

@keyframes dr5LoadSpark {

    0%,
    26%,
    100% {
        opacity: 0;
        transform: translateY(0) scale(0.62);
    }

    48% {
        opacity: 1;
        transform: translateY(-8px) scale(1);
    }

    72% {
        opacity: 0;
        transform: translateY(-14px) scale(0.72);
    }
}

@keyframes dr5NarrowPass {
    0% {
        opacity: 0;
        transform: translate(-18px, -50%) scaleX(0.55);
    }

    18% {
        opacity: 1;
    }

    72% {
        opacity: 1;
        transform: translate(170px, -50%) scaleX(0.84);
    }

    100% {
        opacity: 0;
        transform: translate(230px, -50%) scaleX(0.48);
    }
}

@keyframes dr5GuideGlow {

    0%,
    100% {
        opacity: 0.38;
        filter: brightness(0.9);
    }

    45% {
        opacity: 1;
        filter: brightness(1.25);
    }
}

@keyframes dr5ParkingDraw {
    0% {
        stroke-dashoffset: 260;
        opacity: 0.22;
    }

    62% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 0.34;
    }
}

@keyframes dr5ParkingModule {
    0% {
        left: 10%;
        top: 24%;
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) scale(0.92);
    }

    28% {
        left: 42%;
        top: 24%;
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) scale(0.92);
    }

    43% {
        left: 56%;
        top: 25%;
        opacity: 1;
        transform: translate(-50%, -50%) rotate(8deg) scale(0.9);
    }

    58% {
        left: 66%;
        top: 35%;
        opacity: 1;
        transform: translate(-50%, -50%) rotate(36deg) scale(0.86);
    }

    74% {
        left: 72%;
        top: 55%;
        opacity: 1;
        transform: translate(-50%, -50%) rotate(68deg) scale(0.82);
    }

    88% {
        left: 73.5%;
        top: 72%;
        opacity: 1;
        transform: translate(-50%, -50%) rotate(90deg) scale(0.78);
    }

    100% {
        left: 73.5%;
        top: 72%;
        opacity: 0.9;
        transform: translate(-50%, -50%) rotate(90deg) scale(0.78);
    }
}

@keyframes dr5ParkingSlot {

    0%,
    54% {
        background: rgba(38, 214, 176, 0.13);
        box-shadow: inset 0 1px 0 rgba(154, 255, 224, 0.08);
    }

    78%,
    100% {
        background: rgba(38, 214, 176, 0.22);
        box-shadow:
            inset 0 1px 0 rgba(154, 255, 224, 0.18),
            0 0 12px rgba(38, 214, 176, 0.14);
    }
}

@keyframes dr5ParkingLock {

    0%,
    54% {
        opacity: 0.22;
        transform: translateY(-2px) scale(0.82);
    }

    74%,
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes dr5LocationPulse {
    0% {
        opacity: 0.94;
        transform: translate(-50%, -50%) scale(0.58);
    }

    42% {
        opacity: 0.72;
        transform: translate(-50%, -50%) scale(0.96);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.34);
    }
}

@keyframes dr5RangeNumberFill {

    0% {
        clip-path: inset(100% 0 0 0);
        background-position: 0 105%;
    }

    10% {
        clip-path: inset(88% 0 0 0);
        background-position: 0 92%;
    }

    58% {
        clip-path: inset(34% 0 0 0);
        background-position: 0 62%;
    }

    100% {
        clip-path: inset(0 0 0 0);
        background-position: 0 35%;
    }
}

@media (prefers-reduced-motion: reduce) {

    .feature-card-live-subtle:hover *,
    .feature-card-live-subtle:focus-visible *,
    .feature-card-live-subtle.is-card-active * {
        animation: none !important;
    }
}

/* 
   ====================================================
   CR3 PRECISE ABSOLUTE PLACEMENTS (1276x694 Canvas)
   ====================================================
*/
.fc-cr3-A {
    left: 0;
    top: 0;
    width: calc(304 / 1276 * 100%);
    height: calc(180 / 694 * 100%);
}

.fc-cr3-B {
    left: calc(324 / 1276 * 100%);
    top: 0;
    width: calc(412 / 1276 * 100%);
    height: calc(380 / 694 * 100%);
}

.fc-cr3-C {
    left: calc(756 / 1276 * 100%);
    top: 0;
    width: calc(304 / 1276 * 100%);
    height: calc(180 / 694 * 100%);
}

.fc-cr3-D {
    left: calc(1080 / 1276 * 100%);
    top: 0;
    width: calc(196 / 1276 * 100%);
    height: calc(180 / 694 * 100%);
}

.fc-cr3-E {
    left: 0;
    top: calc(200 / 694 * 100%);
    width: calc(304 / 1276 * 100%);
    height: calc(180 / 694 * 100%);
}

.fc-cr3-F {
    left: calc(756 / 1276 * 100%);
    top: calc(200 / 694 * 100%);
    width: calc(520 / 1276 * 100%);
    height: calc(180 / 694 * 100%);
}

.fc-cr3-G {
    left: 0;
    top: calc(400 / 694 * 100%);
    width: calc(196 / 1276 * 100%);
    height: calc(294 / 694 * 100%);
}

.fc-cr3-H {
    left: calc(216 / 1276 * 100%);
    top: calc(400 / 694 * 100%);
    width: calc(304 / 1276 * 100%);
    height: calc(294 / 694 * 100%);
}

.fc-cr3-I {
    left: calc(540 / 1276 * 100%);
    top: calc(400 / 694 * 100%);
    width: calc(736 / 1276 * 100%);
    height: calc(294 / 694 * 100%);
}

/* 
   ====================================================
   DR5 PRECISE ABSOLUTE PLACEMENTS (1276x694 Canvas)
   ====================================================
*/
.fc-dr5-A {
    left: 0;
    top: 0;
    width: calc(304 / 1276 * 100%);
    height: calc(180 / 694 * 100%);
}

.fc-dr5-B {
    left: calc(324 / 1276 * 100%);
    top: 0;
    width: calc(412 / 1276 * 100%);
    height: calc(380 / 694 * 100%);
}

.fc-dr5-C {
    left: calc(756 / 1276 * 100%);
    top: 0;
    width: calc(304 / 1276 * 100%);
    height: calc(180 / 694 * 100%);
}

.fc-dr5-D {
    left: calc(1080 / 1276 * 100%);
    top: 0;
    width: calc(196 / 1276 * 100%);
    height: calc(180 / 694 * 100%);
}

.fc-dr5-E {
    left: 0;
    top: calc(200 / 694 * 100%);
    width: calc(304 / 1276 * 100%);
    height: calc(180 / 694 * 100%);
}

.fc-dr5-F {
    left: calc(756 / 1276 * 100%);
    top: calc(200 / 694 * 100%);
    width: calc(520 / 1276 * 100%);
    height: calc(180 / 694 * 100%);
}

.fc-dr5-G {
    left: 0;
    top: calc(400 / 694 * 100%);
    width: calc(196 / 1276 * 100%);
    height: calc(294 / 694 * 100%);
}

.fc-dr5-H {
    left: calc(216 / 1276 * 100%);
    top: calc(400 / 694 * 100%);
    width: calc(304 / 1276 * 100%);
    height: calc(294 / 694 * 100%);
}

.fc-dr5-I1 {
    left: calc(540 / 1276 * 100%);
    top: calc(400 / 694 * 100%);
    width: calc(736 / 1276 * 100%);
    height: calc(137 / 694 * 100%);
}

.fc-dr5-I2 {
    left: calc(540 / 1276 * 100%);
    top: calc(557 / 694 * 100%);
    width: calc(736 / 1276 * 100%);
    height: calc(137 / 694 * 100%);
}

/* English DR5 card cleanup: keep copy readable while preserving the live icon area. */
.en-product-page .feature-grid-dr5 .feature-card-en-copy {
    z-index: 18;
}

.en-product-page .feature-grid-dr5 .feature-card-en-copy::before {
    background: linear-gradient(90deg,
            rgba(36, 37, 41, 1) 0%,
            rgba(36, 37, 41, 1) var(--en-mask-solid, 68%),
            rgba(36, 37, 41, 0.98) var(--en-mask-fade, 88%),
            rgba(36, 37, 41, var(--en-mask-end-opacity, 0.74)) 100%);
}

.en-product-page .feature-grid-dr5 .feature-card-en-copy--tight::before {
    background: linear-gradient(90deg,
            rgba(36, 37, 41, 1) 0%,
            rgba(36, 37, 41, 1) var(--en-mask-solid, 70%),
            rgba(36, 37, 41, 0.98) var(--en-mask-fade, 90%),
            rgba(36, 37, 41, var(--en-mask-end-opacity, 0.76)) 100%);
}

.en-product-page .feature-grid-dr5 .feature-card-en-copy-inner {
    max-width: min(62%, 330px);
}

.en-product-page .feature-grid-dr5 .feature-card-en-copy--small .feature-card-en-copy-inner {
    max-width: min(72%, 248px);
}

.en-product-page .feature-grid-dr5 .subtle-live-layer,
.en-product-page .feature-grid-dr5 .scan-map-layer,
.en-product-page .feature-grid-dr5 .terrain-breathe-layer,
.en-product-page .feature-grid-dr5 .safety-helmet-layer {
    z-index: 5;
}

.en-product-page .feature-grid-dr5 .dr5-load-live,
.en-product-page .feature-grid-dr5 .dr5-range-live,
.en-product-page .feature-grid-dr5 .dr5-parking-live,
.en-product-page .feature-grid-dr5 .dr5-location-live {
    background: #242529;
}

.en-product-page .feature-grid-dr5 .dr5-load-live>img,
.en-product-page .feature-grid-dr5 .dr5-range-live>img,
.en-product-page .feature-grid-dr5 .dr5-parking-live>img {
    opacity: 0;
}

.en-product-page .feature-grid-dr5 .dr5-location-live>img {
    opacity: 0.34;
    filter: saturate(0.82) brightness(0.6);
}

.en-product-page .feature-grid-dr5 .fc-dr5-A .feature-card-en-copy {
    --en-mask-solid: 78%;
    --en-mask-fade: 94%;
    --en-mask-end-opacity: 0.82;
}

.en-product-page .feature-grid-dr5 .fc-dr5-B .feature-card-en-copy {
    --en-mask-solid: 54%;
    --en-mask-fade: 70%;
    --en-mask-end-opacity: 0.14;
}

.en-product-page .feature-grid-dr5 .fc-dr5-C .feature-card-en-copy {
    --en-mask-solid: 68%;
    --en-mask-fade: 88%;
    --en-mask-end-opacity: 0.62;
}

.en-product-page .feature-grid-dr5 .fc-dr5-D .feature-card-en-copy {
    --en-mask-solid: 82%;
    --en-mask-fade: 96%;
    --en-mask-end-opacity: 0.86;
}

.en-product-page .feature-grid-dr5 .fc-dr5-E .feature-card-en-copy {
    --en-mask-solid: 56%;
    --en-mask-fade: 74%;
    --en-mask-end-opacity: 0.18;
}

.en-product-page .feature-grid-dr5 .fc-dr5-F .feature-card-en-copy {
    --en-mask-solid: 50%;
    --en-mask-fade: 70%;
    --en-mask-end-opacity: 0.36;
}

.en-product-page .feature-grid-dr5 .fc-dr5-G .feature-card-en-copy {
    --en-mask-solid: 86%;
    --en-mask-fade: 98%;
    --en-mask-end-opacity: 0.88;
}

.en-product-page .feature-grid-dr5 .fc-dr5-H .feature-card-en-copy {
    --en-mask-solid: 45%;
    --en-mask-fade: 64%;
    --en-mask-end-opacity: 0.12;
}

.en-product-page .feature-grid-dr5 .fc-dr5-I1 .feature-card-en-copy {
    --en-mask-solid: 42%;
    --en-mask-fade: 58%;
    --en-mask-end-opacity: 0.26;
}

.en-product-page .feature-grid-dr5 .fc-dr5-I2 .feature-card-en-copy {
    --en-mask-solid: 46%;
    --en-mask-fade: 66%;
    --en-mask-end-opacity: 0.36;
}

.en-product-page .feature-grid-dr5 .dr5-load-icon-mask {
    left: 45%;
    top: 36%;
    width: 34%;
    height: 44%;
}

.en-product-page .feature-grid-dr5 .dr5-load-weight {
    left: 61%;
    top: 55%;
    width: 17.5%;
}

.en-product-page .feature-grid-dr5 .dr5-load-platform {
    left: 48%;
    top: 72%;
    width: 27%;
}

.en-product-page .feature-grid-dr5 .dr5-load-gauge {
    top: 53%;
    height: 18%;
}

.en-product-page .feature-grid-dr5 .gauge-left {
    left: 51%;
}

.en-product-page .feature-grid-dr5 .gauge-right {
    right: 24%;
}

.en-product-page .feature-grid-dr5 .spark-one {
    left: 52%;
}

.en-product-page .feature-grid-dr5 .spark-two {
    right: 25%;
}

.en-product-page .feature-grid-dr5 .dr5-range-number-mask {
    left: 39%;
    top: 35%;
    width: 55%;
    height: 36%;
}

.en-product-page .feature-grid-dr5 .dr5-range-number {
    left: 48%;
    top: 43%;
    font-size: clamp(32px, 3.5vw, 54px);
    opacity: 0.96;
}

.en-product-page .feature-grid-dr5 .dr5-parking-title {
    display: none;
}

.en-product-page .feature-grid-dr5 .dr5-parking-live .subtle-live-layer {
    background:
        radial-gradient(circle at 82% 72%, rgba(36, 229, 184, 0.05), transparent 25%),
        #242529;
}

.en-product-page .feature-grid-dr5 .dr5-parking-visual {
    right: 3.5%;
    top: 30%;
    width: 54%;
    height: 66%;
}

.en-product-page .feature-grid-dr5 .dr5-parking-slots {
    right: 0;
    bottom: 0;
    width: 72%;
    height: 38%;
}

.en-product-page .feature-grid-dr5 .dr5-parking-module {
    width: 62px;
    height: 28px;
    font-size: 13px;
}

.en-product-page .feature-grid-dr5 .dr5-location-ring {
    left: 81%;
    top: 51%;
    width: 24%;
}

.en-product-page .feature-grid-dr5 .dr5-location-ring.ring-b {
    left: 81%;
    top: 51%;
    width: 34%;
}

.en-product-page .feature-grid-dr5 .climb-stage-mask {
    background: #242529;
}

.en-product-page .feature-grid-dr5 .climb-ramp {
    left: 24%;
    bottom: 25%;
    width: 60%;
}

.en-product-page .feature-grid-dr5 .climb-strong {
    left: 26%;
}

.en-product-page .feature-grid-dr5 .fc-dr5-B>img,
.en-product-page .feature-grid-dr5 .fc-dr5-E>img,
.en-product-page .feature-grid-dr5 .fc-dr5-H>img,
.en-product-page .feature-grid-dr5 .fc-dr5-I1>img {
    opacity: 0 !important;
}

.en-product-page .feature-grid-dr5 .dr5-load-live .subtle-live-layer,
.en-product-page .feature-grid-dr5 .dr5-range-live .subtle-live-layer,
.en-product-page .feature-grid-dr5 .dr5-location-live .subtle-live-layer {
    opacity: 1;
    z-index: 19;
    background: transparent;
}

.en-product-page .feature-grid-dr5 .fc-dr5-I1 .feature-card-en-copy-inner {
    max-width: min(42%, 310px);
}

.en-product-page .feature-grid-dr5 .fc-dr5-I1 .feature-card-en-copy h3 {
    max-width: 310px;
    font-size: clamp(20px, 2.15vw, 31px);
    line-height: 0.98;
}

.en-product-page .feature-grid-dr5 .fc-dr5-I1 .feature-card-en-copy p {
    max-width: 260px;
}

.en-product-page .feature-grid-dr5 .dr5-parking-visual {
    right: 1.5%;
    top: 43%;
    width: 51%;
    height: 54%;
}

.en-product-page .feature-grid-dr5 .dr5-parking-svg {
    top: 5%;
    height: 82%;
}

.en-product-page .feature-grid-dr5 .dr5-parking-slots {
    height: 42%;
}

.en-product-page .feature-grid-dr5 .dr5-range-number-mask {
    left: 35%;
    top: 43%;
    width: 62%;
    height: 42%;
}

.en-product-page .feature-grid-dr5 .dr5-range-number {
    left: 45%;
    top: 54%;
    font-size: clamp(30px, 3.35vw, 50px);
}

.en-product-page .feature-grid-dr5 .fc-dr5-H .feature-card-en-copy-inner {
    max-width: min(68%, 230px);
}

.en-product-page .feature-grid-dr5 .fc-dr5-H .feature-card-en-copy h3 {
    font-size: clamp(17px, 1.75vw, 23px);
}

.en-product-page .feature-grid-dr5 .dr5-load-live .subtle-live-layer {
    background: transparent;
}

.en-product-page .feature-grid-dr5 .dr5-load-weight {
    left: 63%;
    top: 52%;
    width: 16%;
}

.en-product-page .feature-grid-dr5 .dr5-load-platform {
    left: 51%;
    top: 69%;
    width: 24%;
}

.en-product-page .feature-grid-dr5 .dr5-load-icon-mask {
    display: none;
}

.en-product-page .feature-grid-dr5 .dr5-location-live .subtle-live-layer::before {
    content: "";
    position: absolute;
    left: 73%;
    top: 50%;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 34px solid rgba(46, 129, 255, 0.72);
    transform: translate(-50%, -50%) rotate(-46deg);
    filter: drop-shadow(0 0 10px rgba(46, 129, 255, 0.24));
}

.en-product-page .feature-grid-dr5 .dr5-location-ring {
    left: 75%;
    top: 50%;
    width: 22%;
}

.en-product-page .feature-grid-dr5 .dr5-location-ring.ring-b {
    left: 75%;
    top: 50%;
    width: 32%;
}

/* Keep the originally acceptable DR5 English cards on their prior layer model. */
.en-product-page .feature-grid-dr5 .fc-dr5-A .feature-card-en-copy,
.en-product-page .feature-grid-dr5 .fc-dr5-C .feature-card-en-copy,
.en-product-page .feature-grid-dr5 .fc-dr5-D .feature-card-en-copy,
.en-product-page .feature-grid-dr5 .fc-dr5-F .feature-card-en-copy,
.en-product-page .feature-grid-dr5 .fc-dr5-G .feature-card-en-copy {
    z-index: 6;
}

.en-product-page .feature-grid-dr5 .fc-dr5-A .feature-card-en-copy--tight::before,
.en-product-page .feature-grid-dr5 .fc-dr5-C .feature-card-en-copy--tight::before,
.en-product-page .feature-grid-dr5 .fc-dr5-D .feature-card-en-copy--tight::before,
.en-product-page .feature-grid-dr5 .fc-dr5-F .feature-card-en-copy--tight::before,
.en-product-page .feature-grid-dr5 .fc-dr5-G .feature-card-en-copy--tight::before {
    background: linear-gradient(90deg,
            rgba(36, 37, 41, 1) 0%,
            rgba(36, 37, 41, 1) var(--en-mask-solid, 56%),
            rgba(36, 37, 41, 0.92) var(--en-mask-fade, 78%),
            rgba(36, 37, 41, var(--en-mask-end-opacity, 0.48)) 100%);
}

.en-product-page .feature-grid-dr5 .fc-dr5-A .feature-card-en-copy {
    --en-mask-solid: 55%;
    --en-mask-fade: 78%;
    --en-mask-end-opacity: 0.48;
}

.en-product-page .feature-grid-dr5 .fc-dr5-C .feature-card-en-copy {
    --en-mask-solid: 54%;
    --en-mask-fade: 77%;
    --en-mask-end-opacity: 0.38;
}

.en-product-page .feature-grid-dr5 .fc-dr5-D .feature-card-en-copy {
    --en-mask-solid: 62%;
    --en-mask-fade: 86%;
    --en-mask-end-opacity: 0.54;
}

.en-product-page .feature-grid-dr5 .fc-dr5-F .feature-card-en-copy {
    --en-mask-solid: 44%;
    --en-mask-fade: 62%;
    --en-mask-end-opacity: 0.24;
}

.en-product-page .feature-grid-dr5 .fc-dr5-G .feature-card-en-copy {
    --en-mask-solid: 62%;
    --en-mask-fade: 84%;
    --en-mask-end-opacity: 0.44;
}

.en-product-page .feature-grid-dr5 .fc-dr5-C .scan-map-layer,
.en-product-page .feature-grid-dr5 .fc-dr5-F .subtle-live-layer,
.en-product-page .feature-grid-dr5 .fc-dr5-G .subtle-live-layer,
.en-product-page .feature-grid-dr5 .fc-dr5-D .terrain-breathe-layer {
    z-index: 7;
}

.en-product-page .feature-grid-dr5 .fc-dr5-G .climb-stage-mask {
    background:
        radial-gradient(circle at 45% 36%, rgba(0, 211, 255, 0.13), transparent 40%),
        radial-gradient(circle at 64% 62%, rgba(143, 255, 214, 0.1), transparent 44%),
        #222428;
}

.en-product-page .feature-grid-dr5 .fc-dr5-G .climb-ramp {
    left: 17%;
    bottom: 30%;
    width: 68%;
}

.en-product-page .feature-grid-dr5 .fc-dr5-G .climb-strong {
    left: 5%;
}

.en-product-page .safety-live .safety-helmet-layer {
    z-index: 8;
}

.en-product-page .safety-live .safety-helmet {
    left: 78%;
    top: 52%;
    width: 18%;
    height: 24%;
    opacity: 0.88;
    transform: translate(-50%, -50%) translateY(0) scale(0.94) rotate(-3deg);
    filter:
        drop-shadow(0 8px 14px rgba(0, 0, 0, 0.26))
        drop-shadow(0 0 10px rgba(0, 211, 255, 0.12));
}

.en-product-page .safety-live:hover .safety-helmet,
.en-product-page .safety-live:focus-visible .safety-helmet,
.en-product-page .safety-live.is-card-active .safety-helmet {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(-3px) scale(1.02) rotate(-1deg);
    filter:
        drop-shadow(0 10px 16px rgba(0, 0, 0, 0.28))
        drop-shadow(0 0 16px rgba(0, 211, 255, 0.22));
}

@media (max-width: 900px) {
    .feature-section-intro {
        width: min(92vw, 640px);
        padding: clamp(4.5rem, 12vw, 6.5rem) 0 0;
        text-align: left;
    }

    .feature-section-kicker {
        font-size: 12px;
        letter-spacing: 0.16em;
    }

    .feature-section-title {
        font-size: clamp(34px, 9vw, 52px);
        line-height: 1.08;
        text-wrap: balance;
    }

    .feature-section-desc {
        max-width: none;
        margin: 1.1rem 0 0;
        font-size: clamp(16px, 4vw, 19px);
        line-height: 1.62;
        text-wrap: auto;
    }

    .feature-grid-container-abs {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
        gap: 14px;
        width: min(92vw, 640px);
        max-width: 640px;
        margin: 2rem auto 4rem;
        aspect-ratio: auto;
        perspective: none;
    }

    .feature-grid-container-abs .feature-card-abs {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0;
        aspect-ratio: 304 / 180;
        transform: none !important;
    }

    .feature-grid-container-abs .feature-card-abs:hover {
        transform: translateY(-3px) !important;
    }

    .feature-grid-container-abs .feature-card-abs img,
    .feature-grid-container-abs .feature-card-fallback {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .feature-grid-container-abs .fc-cr3-B,
    .feature-grid-container-abs .fc-dr5-B {
        aspect-ratio: 412 / 380;
    }

    .feature-grid-container-abs .fc-cr3-G,
    .feature-grid-container-abs .fc-cr3-H,
    .feature-grid-container-abs .fc-dr5-G,
    .feature-grid-container-abs .fc-dr5-H {
        aspect-ratio: 304 / 220;
    }

    .feature-grid-container-abs .fc-cr3-I {
        aspect-ratio: 736 / 294;
    }

    .feature-grid-container-abs .fc-dr5-I1,
    .feature-grid-container-abs .fc-dr5-I2 {
        aspect-ratio: 736 / 180;
    }
}

@media (max-width: 560px) {
    .feature-grid-container-abs {
        grid-template-columns: 1fr;
    }

    .feature-grid-container-abs .fc-cr3-I,
    .feature-grid-container-abs .fc-dr5-I1,
    .feature-grid-container-abs .fc-dr5-I2 {
        aspect-ratio: 304 / 180;
    }
}