/* Technology screen */
#technology .tech-screen__shell {
    justify-content: flex-start;
    overflow: hidden;
}

#technology .tech-screen__head {
    text-align: center;
    flex-shrink: 0;
}

#technology .tech-screen__h2 {
    margin: 0;
    color: var(--cyan);
    font-size: clamp(28px, 4vw, 52px);
    font-family: "Orbitron", sans-serif;
}

#technology .tech-screen__lede {
    margin: 12px auto 0;
    max-width: 840px;
    color: #d6e8ff;
}

#technology .tech-screen__main {
    flex: 1 1 auto;
    position: relative;
    min-height: 620px;
    padding: 20px 12px 0;
}

#technology .tech-screen__rail {
    position: absolute;
    z-index: 2;
    width: min(480px, 32vw);
    display: flex;
    flex-direction: column;
    gap: 26px;
}

#technology .tech-screen__rail--left {
    left: 1%;
    top: 0;
}

#technology .tech-screen__rail--right {
    right: 1%;
    top: 0;
}

#technology .tech-screen__rail .tech-screen__card:first-child {
    margin-bottom: 50px;
}

#technology .tech-screen__card {
    position: relative;
    padding: 40px 60px;
    min-height: 250px;
    border-radius: 24px;
    border: 1px solid rgba(94, 242, 255, .2);
    background: url("../image/3/3_1.png") center center / 100% 100% no-repeat;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(255, 255, 255, .04);
    backdrop-filter: blur(12px);
    overflow: hidden;
}

#technology .tech-screen__card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(5, 12, 28, .56), rgba(8, 18, 38, .34) 48%, rgba(176, 77, 255, .12));
    pointer-events: none;
}

#technology .tech-screen__card-title {
    position: relative;
    margin: 0 0 14px;
    font-size: 22px;
    line-height: 1.35;
    color: #f3fbff;
}

#technology .tech-screen__card-text {
    position: relative;
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
    color: #c6d8ea;
}

#technology .tech-screen__hub-slot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(360px, 30vw);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    z-index: 3;
}

#technology .tech-screen__hub {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

#technology .tech-screen__hub-bg,
#technology .tech-screen__hub-sweep,
#technology .tech-screen__hub-ring,
#technology .tech-screen__hub-dial {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

#technology .tech-screen__hub-bg {
    background:
        radial-gradient(circle at center, rgba(94, 242, 255, .2) 0, rgba(94, 242, 255, .08) 28%, rgba(5, 10, 28, .1) 52%, transparent 70%),
        radial-gradient(circle at center, rgba(176, 77, 255, .1), transparent 72%);
    box-shadow: inset 0 0 45px rgba(94, 242, 255, .18), 0 0 60px rgba(94, 242, 255, .16);
}

#technology .tech-screen__hub-sweep {
    inset: 6%;
    background: conic-gradient(from 210deg, transparent 0 45%, rgba(94, 242, 255, .16) 58%, transparent 70% 100%);
    animation: techSweep 10s linear infinite;
}

#technology .tech-screen__hub-ring {
    border: 1px solid rgba(94, 242, 255, .26);
}

#technology .tech-screen__hub-ring span {
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    border: 1px dashed rgba(94, 242, 255, .24);
}

#technology .tech-screen__hub-ring--a {
    inset: 3%;
    animation: pulseRing 3.6s ease-in-out infinite;
}

#technology .tech-screen__hub-ring--b {
    inset: 13%;
    animation: pulseRing 3.6s ease-in-out infinite reverse;
}

#technology .tech-screen__hub-dial {
    inset: 20%;
    border: 1px solid rgba(176, 77, 255, .24);
    box-shadow: inset 0 0 30px rgba(176, 77, 255, .1);
}

#technology .tech-screen__hub-core {
    position: relative;
    z-index: 2;
    width: 52%;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 50%;
    text-align: center;
    font-family: "Orbitron", sans-serif;
    font-size: clamp(20px, 1.7vw, 28px);
    line-height: 1.35;
    color: #effcff;
    background: radial-gradient(circle at 30% 30%, rgba(94, 242, 255, .28), rgba(13, 22, 50, .96) 72%);
    box-shadow: 0 0 0 1px rgba(94, 242, 255, .28), inset 0 0 26px rgba(255, 255, 255, .08), 0 0 46px rgba(94, 242, 255, .18);
    text-shadow: 0 0 22px rgba(94, 242, 255, .28);
    cursor: pointer;
}

#technology .tech-screen__hub-core small {
    display: block;
    font-size: 10px;
    letter-spacing: .24em;
    color: #8fb8d7;
}

#technology .tech-screen__node {
    position: absolute;
    z-index: 4;
    min-width: 138px;
    padding: 10px 14px;
    border: 1px solid rgba(94, 242, 255, .24);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(6, 16, 34, .92), rgba(20, 20, 20, .78));
    box-shadow: 0 12px 28px rgba(0, 0, 0, .26), inset 0 0 0 1px rgba(255, 255, 255, .04);
    color: #eaf8ff;
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: .02em;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translate(var(--tx, 0), var(--ty, 0)) scale(.72);
    transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease, border-color .25s ease;
}

#technology .tech-screen__node span {
    position: relative;
    z-index: 1;
    display: block;
}

#technology .tech-screen__node::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(94, 242, 255, .14), rgba(176, 77, 255, .08));
    opacity: .9;
}

/* #technology .tech-screen__node::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(94, 242, 255, .95);
    box-shadow: 0 0 14px rgba(94, 242, 255, .9);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .3s ease;
} */

#technology .tech-screen__hub:hover .tech-screen__node,
#technology .tech-screen__hub:focus-within .tech-screen__node {
    opacity: 1;
    pointer-events: auto;
    transform: translate(var(--tx-open, 0), var(--ty-open, 0)) scale(1);
}

#technology .tech-screen__hub:hover .tech-screen__node::after,
#technology .tech-screen__hub:focus-within .tech-screen__node::after {
    opacity: 1;
}

#technology .tech-screen__node:hover,
#technology .tech-screen__node.active {
    border-color: rgba(94, 242, 255, .52);
    box-shadow: 0 0 0 1px rgba(94, 242, 255, .18), 0 18px 34px rgba(16, 30, 58, .42), 0 0 22px rgba(94, 242, 255, .18);
}

#technology .tech-screen__node--1 {
    --tx: -24px;
    --ty: -18px;
    --tx-open: -12px;
    --ty-open: -198px;
}

#technology .tech-screen__node--2 {
    --tx: -20px;
    --ty: -16px;
    --tx-open: 146px;
    --ty-open: -146px;
}

#technology .tech-screen__node--3 {
    --tx: -18px;
    --ty: -12px;
    --tx-open: 218px;
    --ty-open: -18px;
}

#technology .tech-screen__node--4 {
    --tx: -20px;
    --ty: -10px;
    --tx-open: 142px;
    --ty-open: 132px;
}

#technology .tech-screen__node--5 {
    --tx: -26px;
    --ty: -10px;
    --tx-open: -10px;
    --ty-open: 190px;
}

#technology .tech-screen__node--6 {
    --tx: -20px;
    --ty: -10px;
    --tx-open: -164px;
    --ty-open: 132px;
}

#technology .tech-screen__node--7 {
    --tx: -18px;
    --ty: -12px;
    --tx-open: -242px;
    --ty-open: -16px;
}

#technology .tech-screen__node--8 {
    --tx: -20px;
    --ty: -16px;
    --tx-open: -166px;
    --ty-open: -146px;
}

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

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

@media (max-width: 1180px) {
    #technology .tech-screen__main {
        min-height: 560px;
        padding-inline: 8px;
    }

    #technology .tech-screen__rail {
        width: min(320px, 31vw);
        gap: 18px;
    }

    #technology .tech-screen__rail .tech-screen__card:first-child {
        margin-bottom: 214px;
    }

    #technology .tech-screen__card {
        min-height: 176px;
        padding: 20px 20px;
    }

    #technology .tech-screen__card-title {
        font-size: 18px;
    }

    #technology .tech-screen__card-text {
        font-size: 13px;
    }

    #technology .tech-screen__hub-slot {
        width: min(320px, 28vw);
    }

    #technology .tech-screen__node {
        min-width: 118px;
        padding: 8px 12px;
        font-size: 11px;
    }

    #technology .tech-screen__node--1 { --tx-open: -10px; --ty-open: -174px; }
    #technology .tech-screen__node--2 { --tx-open: 126px; --ty-open: -126px; }
    #technology .tech-screen__node--3 { --tx-open: 186px; --ty-open: -14px; }
    #technology .tech-screen__node--4 { --tx-open: 124px; --ty-open: 112px; }
    #technology .tech-screen__node--5 { --tx-open: -8px; --ty-open: 168px; }
    #technology .tech-screen__node--6 { --tx-open: -146px; --ty-open: 112px; }
    #technology .tech-screen__node--7 { --tx-open: -202px; --ty-open: -12px; }
    #technology .tech-screen__node--8 { --tx-open: -148px; --ty-open: -126px; }
}

@media (max-width: 760px) {
    #technology .tech-screen__shell {
        overflow: visible;
    }

    #technology .tech-screen__main {
        min-height: auto;
        padding: 14px 0 0;
    }

    #technology .tech-screen__rail {
        position: relative;
        width: 100%;
        top: auto;
        left: auto;
        right: auto;
        gap: 18px;
    }

    #technology .tech-screen__rail .tech-screen__card:first-child {
        margin-bottom: 18px;
    }

    #technology .tech-screen__card {
        min-height: 188px;
        padding: 20px 18px;
    }

    #technology .tech-screen__card-title {
        font-size: 18px;
    }

    #technology .tech-screen__card-text {
        font-size: 14px;
    }

    #technology .tech-screen__hub-slot {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: min(320px, 88vw);
        margin: 24px auto;
    }

    #technology .tech-screen__node {
        display: none;
    }
}