* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;

    scrollbar-width: none;

    overflow: hidden;

    -ms-overflow-style: none;

}

html::-webkit-scrollbar {
    display: none;

}

body {
    padding: 0;
    margin: 0;
    font: 1.5vmin Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
}

.maindiv {
    position: relative;
    min-height: 100vh;
    width: 100%;
}

.back1 {
    width: 100%;
    position: absolute;
    z-index: 0;
    left: 0;
    object-fit: cover;
}

.frm1 {
    position: absolute;
    width: 30vw;
    height: 30vw;
    left: 45vw;
    top: 31vw;
}

.frm2 {
    position: absolute;
    width: 8.1vw;
    height: 10vw;
    left: 79vw;
    top: 18.2vw;
}

.car1 {
    width: 4.5vw;
    position: absolute;
    display: inline-block;

    animation: go1 6s linear infinite;
}

.car2 {
    width: 4.5vw;
    position: absolute;
    display: inline-block;

    animation: go2 8s linear infinite;
}

.car3 {
    width: 3vw;
    position: absolute;
    display: inline-block;

    animation: go3 7s linear infinite;
}

.car4 {
    width: 4vw;
    position: absolute;
    display: inline-block;
    rotate: 10deg;

    animation: go4 6s linear infinite;
}

.car5 {
    width: 3.2vw;
    position: absolute;
    display: inline-block;

    animation: go5 10s linear infinite;
}

.fen1 {
    width: 6vw;
    left: 15.4vw;
    top: 10.4vw;
    position: absolute;
    display: inline-block;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    animation: rotateAnimation 2s infinite linear;

    transform: translate3d(0, 0, 0);
}

.fen2 {
    width: 5.5vw;
    left: 19.75vw;
    top: 9.8vw;
    position: absolute;
    display: inline-block;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    animation: rotateAnimation 4s infinite linear;

    transform: translate3d(0, 0, 0);
}

@keyframes go1 {
    0% {
        opacity: 0;
        transform: translateX(41vw) translateY(60.38vw);
    }
    5% {
        opacity: 1;
        transform: translateX(41vw) translateY(60.25vw);
    }
    95% {
        opacity: 1;
        transform: translateX(-9.31vw) translateY(22.44vw);
    }
    100% {
        opacity: 0;
        transform: translateX(-8.75vw) translateY(22vw);
    }
}

@keyframes go2 {
    0% {
        opacity: 0;
        transform: translateX(-6.63vw) translateY(26vw);
    }

    5% {
        opacity: 1;
        transform: translateX(-7vw) translateY(26vw);
    }
    95% {
        opacity: 1;
        transform: translateX(36.88vw) translateY(60.94vw);
    }
    100% {
        opacity: 0;
        transform: translateX(22.18vw) translateY(52.94vw);
    }
}

@keyframes go3 {
    0% {
        opacity: 0;
        transform: translateX(59.31vw) translateY(21.94vw);
    }

    2% {
        opacity: 1;
        transform: translateX(59.31vw) translateY(21.94vw);
    }

    95% {
        opacity: 1;
        transform: translateX(100.31vw) translateY(40.64vw);
    }

    100% {
        opacity: 0;
        transform: translateX(108.6vw) translateY(41.94vw);
    }
}

@keyframes go4 {
    0% {
        opacity: 0;
        transform: translateX(51vw) translateY(53vw);
    }

    5% {
        opacity: 1;
        transform: translateX(52vw) translateY(51vw);
    }
    95% {
        opacity: 1;
        transform: translateX(1.5vw) translateY(25.5vw);
    }
    100% {
        opacity: 0;
        transform: translateX(1vw) translateY(25vw);
    }
}

@keyframes go5 {
    0% {
        opacity: 0;
        transform: translateX(77vw) translateY(29.94vw);
    }

    5% {
        opacity: 1;
        transform: translateX(74vw) translateY(30.94vw);
    }

    95% {
        opacity: 1;
        transform: translateX(33vw) translateY(46.94vw);
    }

    100% {
        opacity: 0;
        transform: translateX(30vw) translateY(47.94vw);
    }
}

@keyframes rotateAnimation {
    from {
        transform: rotate(0deg) translateZ(0);
    }

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

.yplace {
    position: absolute;
    cursor: pointer;

    transition: display 0.3s ease;

}

.place1 {
    left: 28vw;
    top: 11vw;
    opacity: 1;
    transition: opacity 0.3s ease, display 0.3s ease;
    padding: 3vw;
}

.place2 {
    left: 11vw;
    top: 16vw;
    padding: 3vw;
}

.place3 {
    left: 47vw;
    top: 23vw;
    padding: 3vw;
}

.place4 {
    left: 70vw;
    top: 14vw;
    padding: 3vw;
}

.place5 {
    left: 68vw;
    top: 34vw;
    padding: 3vw;
}

.place6 {
    left: 51vw;
    top: 12vw;
    padding: 3vw;
}

.place7 {
    left: 29vw;
    top: 17.6vw;
    padding: 3vw;
}

.place8 {
    left: 30vw;
    top: 26.4vw;
    padding: 3vw;
}

.place3 .place-card {
    left: auto;
    right: 7vw;
    margin-top: -6vw;
}

.place4 .place-card {
    left: auto;
    right: 7vw;
    margin-top: -4vw;
}

.place5 .place-card {
    left: auto;
    right: 7vw;
    margin-top: -14vw;
}

.place7 .place-card {
    top: 50%;
    margin-top: -14vw;
}

.place8 .place-card {
    top: auto;
    bottom: -6vw;
}

.uiverse_loader {
    height: 2.3vmin;
    width: 2.3vmin;
    border-radius: 50%;
    background-color: #13c25c;
    animation: 1.5s pulse infinite ease-in-out;
    position: relative;
    z-index: 1;
    align-items: center;
    justify-content: center;

}

.uiverse_loader::before {
    content: '•';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -53%);
    font-size: 2.2vmin;
    color: white;
    font-weight: 900;

}

.uiverse_loader.show {
    display: flex;

}

.place-label {
    position: absolute;
    left: calc(100% + 0.8vw);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: 0.6vw;
    font-weight: 700;
    letter-spacing: 0.03vw;
    color: #fff;

    padding: 0.16vw 0.55vw;
    border-radius: 999px;
    background-color: #14ab53;
    border: 1.5px solid #fff;
    pointer-events: none;
}

.place-label b {
    font-weight: 700;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 #75fcad;
    }

    100% {
        box-shadow: 0 0 0 1.5vmin #69ffa800;
    }
}

.yplace {
    z-index: 50;
}

.yplace:hover,
.yplace.is-open {
    z-index: 60;
}

.place-card {
    position: absolute;
    left: 7vw;
    top: 0.5vw;
    width: 18.75vw;

    z-index: 60;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.92) translateY(-0.5vw);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
    cursor: default;
}

.yplace:hover .place-card,
.yplace.is-open .place-card {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1) translateY(0);
}
place-label:hover .place-card,
.yplace.is-open .place-card {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1) translateY(0);
}

.yplace:hover .place-card:hover,
.yplace.is-open .place-card:hover {
    transform: perspective(104vw) rotateY(10deg) rotateX(5deg) scale(1.02);
}

.laser-border {
    position: absolute;
    inset: -0.1vw;
    border-radius: 1.67vw;
    z-index: 1;
    overflow: hidden;
}

.laser-border::before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: conic-gradient(transparent 70%, #00d2ff, #9d50bb, transparent 90%);
    animation: rotate-border 3s linear infinite;
}

.laser-border::after {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    filter: blur(0.78vw);
    opacity: 0.2;
    animation: pulse-glow 4s ease-in-out infinite;
}

.card-body {
    position: relative;
    background: rgba(255, 255, 255, 0.88);
    border-radius: 1.56vw;
    padding: 1.56vw;
    z-index: 2;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(6px) saturate(200%);
    transition: all 0.65s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2.08vw 4.17vw -1.04vw rgba(0, 0, 0, 0.08);
    font-family: "Inter", "Helvetica Neue", Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
}

.grid-overlay {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
    background-size: 1.56vw 1.56vw;
    pointer-events: none;
}

.sweep {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: skewX(-25deg);
    transition: 0.8s;
    pointer-events: none;
}

.place-card:hover .sweep {
    left: 150%;
}

.card-header {
    margin-bottom: 1.2vw;
}

.system-tag {
    font-size: 0.5vw;
    text-transform: uppercase;
    letter-spacing: 0vw;
    color: #7000ff;
    margin-bottom: 0.42vw;
    display: block;
    font-weight: 700;
}

.main-title {
    font-size: 1.4vw;
    font-weight: 100;
    letter-spacing: -0.05vw;
    line-height: 1;
    color: #000;
}

.main-title b {
    font-weight: 700;
}

.place-img {
    display: block;
    width: 100%;
    height: 9vw;
    object-fit: cover;
    border-radius: 0.5vw;
    margin-bottom: 1.2vw;
}

.metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6vw;
    margin-bottom: 1.2vw;
}

.metric-box {
    border-left: 1px solid rgba(0, 0, 0, 0.05);
    padding-left: 0.78vw;
    position: relative;
}

.metric-box::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 0;
    width: 1px;
    height: 100%;
    background: #00e5ff;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.5s ease;
}

.yplace:hover .metric-box::before,
.yplace.is-open .metric-box::before {
    transform: scaleY(1);
}

.metric-label {
    font-size: 0.45vw;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 0.16vw;
    display: block;
}

.metric-value {
    font-size: 0.7vw;
    font-weight: 400;
    color: #333;
}

.description {
    font-size: 0.71vw;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.6;
    margin: 0 0 auto;
}

.btn-container {
    margin-top: 1.2vw;
}

.action-btn {
    display: block;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    text-decoration: none;
    background: #2C69B6;
    border: none;
    color: #fff;
    padding: 0.94vw;
    border-radius: 0.78vw;
    cursor: pointer;
    font-size: 0.67vw;
    letter-spacing: 0.16vw;
    transition: all 0.4s ease;
    box-shadow: 0 0.52vw 1.04vw rgba(0, 0, 0, 0.1);
}

.action-btn:hover {
    letter-spacing: 0.26vw;
    transform: translateY(-0.1vw);
    box-shadow: 0 0.78vw 1.56vw rgba(0, 0, 0, 0.2);
}

@keyframes rotate-border {
    from {
        transform: rotate(0deg);
    }

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

@keyframes pulse-glow {

    0%,
    100% {
        opacity: 0.1;
    }

    50% {
        opacity: 0.3;
    }
}