/* About screen */
#about .section-shell {
    justify-content: flex-start;
}

#about .about-stage {
    margin-top: 0;
}

.about-stage {
    display: grid;
    grid-template-columns: minmax(300px, 1.05fr) minmax(380px, 500px) minmax(300px, 1.05fr);
    grid-template-rows: auto auto;
    grid-template-areas: "left core right-top" "loop core right-bottom";
    align-items: stretch;
    gap: 34px;
    min-height: auto;
    padding: 44px;
    background: linear-gradient(135deg, rgba(7, 14, 26, .58), rgba(8, 18, 32, .42));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 24px 60px rgba(2, 8, 22, .28);
    backdrop-filter: blur(12px);
    overflow: hidden
}

.about-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, .05), transparent 28%, transparent 72%, rgba(94, 242, 255, .08));
    pointer-events: none
}

.about-stage::after {
    content: "";
    position: absolute;
    inset: 10% 14% 8% 14%;
    border-radius: 50%;
    border: 1px solid rgba(158, 226, 255, .14);
    box-shadow: 0 0 0 18px rgba(158, 226, 255, .03), 0 0 0 42px rgba(158, 226, 255, .02);
    pointer-events: none;
    opacity: .8
}

.about-stage-glow {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    width: 76%;
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(94, 242, 255, .7), transparent);
    box-shadow: 0 0 22px rgba(94, 242, 255, .38), 0 0 48px rgba(94, 242, 255, .16)
}

.about-stage-glow::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: -10px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    opacity: .7
}

.about-stage-glow,
.about-film,
.about-film-left,
.about-film-right {
    display: none
}

.about-film::before,
.about-film::after {
    display: none
}

.about-film-left {
    left: -42px;
    bottom: 74px;
    transform: rotate(-18deg)
}

.about-film-right {
    right: -34px;
    top: 148px;
    transform: rotate(18deg)
}

.about-beam,
.about-connector,
.about-card-chrome,
.about-energy-swirl,
.about-loop-tab {
    display: none !important
}

.about-card {
    position: relative;
    width: 100%;
    min-height: 260px;
    padding: 30px 30px 28px;
    background: linear-gradient(180deg, rgba(7, 15, 28, .82), rgba(8, 18, 30, .64));
    border: 1px solid rgba(165, 226, 255, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 22px 46px rgba(2, 8, 22, .24);
    backdrop-filter: blur(14px);
    border-radius: 30px;
    clip-path: none
}

.about-card::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 24px;
    width: 104px;
    height: 1px;
    background: linear-gradient(90deg, rgba(125, 228, 255, .72), transparent)
}

.about-card::after {
    content: "";
    position: absolute;
    right: 24px;
    top: 24px;
    width: 38px;
    height: 38px;
    border-top: 1px solid rgba(125, 228, 255, .22);
    border-right: 1px solid rgba(125, 228, 255, .22)
}

.about-card-icon {
    position: absolute;
    right: 28px;
    top: 20px;
    font-size: 40px;
    line-height: 1;
    color: rgba(187, 238, 255, .88);
    text-shadow: 0 0 20px rgba(94, 242, 255, .22)
}

.about-card h3,
.about-core-center h3 {
    margin: 22px 0 14px;
    font-size: 28px;
    line-height: 1.22
}

.about-card p,
.about-core-center p {
    margin: 0;
    color: rgba(225, 236, 250, .9);
    line-height: 1.9
}

.about-card-top-left {
    grid-area: left
}

.about-card-top-right {
    grid-area: right-top
}

.about-card-bottom-right {
    grid-area: right-bottom
}

.accent-green {
    background: linear-gradient(180deg, rgba(12, 24, 32, .78), rgba(10, 20, 28, .56));
    border-color: rgba(180, 230, 214, .16);
    box-shadow: 0 20px 38px rgba(2, 8, 22, .18)
}

.accent-purple {
    background: linear-gradient(180deg, rgba(24, 18, 34, .8), rgba(16, 14, 28, .58));
    border-color: rgba(214, 194, 255, .16);
    box-shadow: 0 20px 38px rgba(2, 8, 22, .18)
}

.about-core-center {
    grid-area: core;
    position: relative;
    width: 100%;
    min-height: 100%;
    padding: 40px 40px 44px;
    text-align: center;
    background: linear-gradient(180deg, rgba(23, 34, 52, .56), rgba(10, 18, 30, .38));
    border: 1px solid rgba(172, 234, 255, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px rgba(3, 10, 24, .28);
    backdrop-filter: blur(18px);
    border-radius: 34px;
    clip-path: none;
    align-self: stretch
}

.about-core-center::before {
    content: "";
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(132, 226, 255, .34), transparent)
}

.about-core-center::after {
    content: "";
    position: absolute;
    left: 32px;
    right: 32px;
    top: 20px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(132, 226, 255, .22), transparent)
}

.about-core-device {
    position: relative;
    width: 210px;
    height: 150px;
    margin: 12px auto 24px;
    filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .3))
}

.about-core-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(94, 242, 255, .24)
}

.about-core-ring.ring-a {
    width: 170px;
    height: 82px
}

.about-core-ring.ring-b {
    width: 128px;
    height: 128px;
    border-color: rgba(176, 77, 255, .22)
}

.about-core-platform {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(120, 176, 255, .95), rgba(72, 118, 214, .72));
    border: 1px solid rgba(255, 255, 255, .24)
}

.about-core-platform.platform-top {
    top: 18px;
    width: 74px;
    height: 48px;
    box-shadow: 0 0 18px rgba(94, 242, 255, .22)
}

.about-core-platform.platform-base {
    bottom: 20px;
    width: 118px;
    height: 22px;
    box-shadow: 0 0 18px rgba(94, 242, 255, .18)
}

.about-core-base {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    width: 132px;
    height: 26px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(91, 140, 255, .95), rgba(35, 92, 165, .78));
    box-shadow: 0 0 24px rgba(94, 242, 255, .22)
}

.about-core-lens {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) perspective(180px) rotateX(12deg);
    width: 92px;
    height: 92px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(91, 140, 255, .95), rgba(94, 242, 255, .42));
    border: 1px solid rgba(255, 255, 255, .24);
    box-shadow: 0 0 34px rgba(94, 242, 255, .28)
}

.about-core-glow {
    position: absolute;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%);
    width: 160px;
    height: 20px;
    border-radius: 999px;
    background: rgba(94, 242, 255, .32);
    filter: blur(12px)
}

@media (max-width:1200px) {
    .about-stage {
        grid-template-columns: 1fr;
        grid-template-areas: "left" "core" "right-top" "right-bottom";
        gap: 22px;
        padding: 28px
    }

    .about-stage::after {
        inset: 18% 10% 14% 10%
    }

    .about-core-center,
    .about-card {
        width: 100%;
        max-width: none;
        margin: 0;
        justify-self: stretch
    }
}

@media (max-width:760px) {
    .about-stage {
        min-height: auto;
        display: grid;
        gap: 18px;
        padding: 18px
    }

    .about-stage::after {
        inset: 22% 6% 16% 6%;
        opacity: .45
    }

    .about-film,
    .about-beam,
    .about-connector {
        display: none
    }

    .about-card,
    .about-core-center {
        position: relative;
        transform: none;
        width: 100%;
        margin: 0;
        border-radius: 24px;
        clip-path: none
    }

    .about-card h3,
    .about-core-center h3 {
        font-size: 23px
    }

    .about-card-icon {
        font-size: 38px;
        right: 20px
    }

    .about-card-chrome,
    .about-loop-tab {
        display: none
    }
}