.inner-page {
    background: radial-gradient(circle at 70% 20%, rgba(184, 255, 79, .06), transparent 32%), var(--bg)
}

.nav-links a.active {
    color: var(--lime)
}

.page-hero {
    min-height: 610px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 50px;
    padding: 95px 0 80px
}

.page-hero-copy h1 {
    font-size: clamp(60px, 8vw, 110px);
    line-height: .9;
    letter-spacing: -.07em;
    font-weight: 500;
    margin: 28px 0
}

.page-hero-copy h1 em,
.page-hero-copy h2 em {
    font-style: normal;
    color: transparent;
    background: linear-gradient(110deg, var(--lime), var(--cyan));
    background-clip: text;
    -webkit-background-clip: text
}

.page-hero-copy>p:not(.eyebrow) {
    max-width: 390px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.65
}

.page-hero-copy .button {
    margin-top: 28px
}

.scene-3d,
.capability-sphere,
.protocol-visual {
    height: 430px;
    position: relative;
    display: grid;
    place-items: center;
    perspective: 900px
}

.scene-ring {
    position: absolute;
    border: 1px solid rgba(184, 255, 79, .23);
    border-radius: 50%;
    transform: rotateX(65deg) rotateZ(20deg)
}

.ring-a {
    width: 360px;
    height: 360px;
    animation: orbit 11s linear infinite
}

.ring-b {
    width: 285px;
    height: 285px;
    transform: rotateX(65deg) rotateZ(-35deg);
    border-color: rgba(111, 255, 224, .18);
    animation: orbit-reverse 9s linear infinite
}

.cube {
    width: 155px;
    height: 155px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(35deg);
    animation: cube-float 7s ease-in-out infinite
}

.cube div {
    position: absolute;
    inset: 0;
    border: 1px solid var(--lime);
    background: rgba(184, 255, 79, .045);
    box-shadow: inset 0 0 28px rgba(184, 255, 79, .09)
}

.cube div:nth-child(1) {
    transform: translateZ(77px)
}

.cube div:nth-child(2) {
    transform: rotateY(180deg) translateZ(77px)
}

.cube div:nth-child(3) {
    transform: rotateY(90deg) translateZ(77px)
}

.cube div:nth-child(4) {
    transform: rotateY(-90deg) translateZ(77px)
}

.cube div:nth-child(5) {
    transform: rotateX(90deg) translateZ(77px)
}

.cube div:nth-child(6) {
    transform: rotateX(-90deg) translateZ(77px)
}

.scene-label,
.capability-sphere>span,
.protocol-visual>span {
    position: absolute;
    right: 10%;
    bottom: 12%;
    font: 10px var(--mono);
    letter-spacing: .12em;
    color: var(--lime)
}

@keyframes orbit {
    to {
        transform: rotateX(65deg) rotateZ(380deg)
    }
}

@keyframes orbit-reverse {
    to {
        transform: rotateX(65deg) rotateZ(-395deg)
    }
}

@keyframes cube-float {

    0%,
    100% {
        transform: rotateX(-20deg) rotateY(35deg) translateY(0)
    }

    50% {
        transform: rotateX(20deg) rotateY(215deg) translateY(-18px)
    }
}

.standalone {
    padding: 20px 0 150px
}

.standalone .version-heading h2,
.standalone .feature-card h2 {
    font-size: 40px;
    line-height: .95;
    letter-spacing: -.055em;
    margin: 12px 0;
    font-weight: 500
}

.capability-sphere {
    overflow: hidden;
    border-radius: 50%;
    width: min(100%, 430px);
    justify-self: end;
    background: radial-gradient(circle at 35% 30%, rgba(184, 255, 79, .3), transparent 10%, rgba(184, 255, 79, .04) 45%, transparent 66%);
    border: 1px solid rgba(184, 255, 79, .25);
    box-shadow: 0 0 90px rgba(184, 255, 79, .13)
}

.sphere-core {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #d7ffa3, #5d9c3f 28%, #10160f 70%);
    box-shadow: 0 0 40px rgba(184, 255, 79, .55);
    animation: pulse-core 4s ease-in-out infinite
}

.sphere-grid {
    position: absolute;
    inset: 18%;
    border: 1px solid rgba(184, 255, 79, .35);
    border-radius: 50%;
    transform: rotateX(65deg) rotateZ(-25deg);
    box-shadow: 0 0 0 25px rgba(184, 255, 79, .05), 0 0 0 55px rgba(184, 255, 79, .03);
    animation: orbit 14s linear infinite
}

@keyframes pulse-core {
    50% {
        transform: scale(1.18);
        box-shadow: 0 0 70px rgba(184, 255, 79, .8)
    }
}

.protocol-visual {
    justify-self: end;
    width: min(100%, 470px)
}

.protocol-disc {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 1px solid var(--lime);
    background: radial-gradient(circle at 40% 30%, rgba(184, 255, 79, .35), rgba(20, 30, 17, .1) 45%, transparent 46%);
    box-shadow: 0 0 70px rgba(184, 255, 79, .15);
    transform-style: preserve-3d;
    animation: disc-spin 10s linear infinite
}

.protocol-axis {
    position: absolute;
    width: 340px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--lime), transparent);
    opacity: .45
}

.axis-x {
    transform: rotate(21deg)
}

.axis-y {
    transform: rotate(-55deg)
}

.axis-z {
    transform: rotate(90deg)
}

@keyframes disc-spin {
    to {
        transform: rotateY(360deg) rotateX(30deg)
    }
}

.protocol-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    margin-bottom: 150px
}

.step {
    min-height: 220px;
    padding: 25px;
    background: var(--bg)
}

.step>span {
    color: var(--lime);
    font: 11px var(--mono)
}

.step h2 {
    font-size: 27px;
    font-weight: 500;
    letter-spacing: -.04em;
    margin: 50px 0 12px
}

.step p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
    max-width: 220px
}

@media(max-width:760px) {
    .page-hero {
        display: block;
        padding: 80px 0 40px;
        min-height: 0
    }

    .page-hero-copy h1 {
        font-size: 64px
    }

    .scene-3d,
    .protocol-visual {
        height: 330px;
        margin-top: 30px
    }

    .capability-sphere {
        width: 330px;
        height: 330px;
        margin: 30px auto 0
    }

    .standalone {
        padding-top: 40px
    }

    .protocol-steps {
        display: block;
        margin-bottom: 90px
    }

    .step {
        border-bottom: 1px solid var(--line);
        min-height: 180px
    }

    .step h2 {
        margin-top: 32px
    }

    .scene-label,
    .capability-sphere>span,
    .protocol-visual>span {
        right: 4%;
        bottom: 4%
    }
}