.school-highlights-section {

    --highlight-navy:
        #010914;

    --highlight-deep:
        #021128;

    --highlight-blue:
        #0877d1;

    --highlight-cyan:
        #16baff;

    --highlight-gold:
        #ffd21c;

    position:
        relative;

    min-height:
        calc(100vh - 90px);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    color:
        white;

    background:
        radial-gradient(
            circle at center,
            #062b58 0%,
            #021128 38%,
            #010914 78%,
            #00050c 100%
        );
}


.highlights-grid {

    position:
        absolute;

    inset:
        -50%;

    opacity:
        0.22;

    background-image:

        linear-gradient(
            rgba(8,119,209,0.18) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(8,119,209,0.18) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;

    transform:
        perspective(500px)
        rotateX(60deg)
        translateY(15%);

    transform-origin:
        center bottom;

    animation:
        highlightsGridMove
        18s
        linear
        infinite;
}


@keyframes highlightsGridMove {

    from {
        background-position:
            0 0,
            0 0;
    }

    to {
        background-position:
            0 550px,
            0 550px;
    }

}



.highlights-scanlines {

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    pointer-events:
        none;

    opacity:
        0.08;

    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(255,255,255,0.08) 4px
        );

    animation:
        scanlineMove
        8s
        linear
        infinite;
}


@keyframes scanlineMove {

    from {
        background-position:
            0 0;
    }

    to {
        background-position:
            0 100px;
    }

}



.school-highlights-section::before {

    content:
        "";

    position:
        absolute;

    width:
        700px;

    height:
        700px;

    top:
        50%;

    left:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(8,119,209,0.16),
            transparent 68%
        );

    filter:
        blur(20px);

    animation:
        ambientPulse
        5s
        ease-in-out
        infinite;

}


@keyframes ambientPulse {

    0%,
    100% {
        opacity:
            0.65;

        transform:
            translate(-50%, -50%)
            scale(0.95);
    }

    50% {
        opacity:
            1;

        transform:
            translate(-50%, -50%)
            scale(1.08);
    }

}



.highlights-particles {

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

}


.highlights-particles span {

    position:
        absolute;

    width:
        3px;

    height:
        3px;

    border-radius:
        50%;

    background:
        var(--highlight-cyan);

    box-shadow:
        0 0 12px
        var(--highlight-cyan);

    animation:
        particleFloat
        linear
        infinite;
}


.highlights-particles span:nth-child(1) {
    left: 12%;
    top: 30%;
    animation-duration: 8s;
}

.highlights-particles span:nth-child(2) {
    left: 22%;
    top: 70%;
    animation-duration: 11s;
}

.highlights-particles span:nth-child(3) {
    left: 78%;
    top: 25%;
    animation-duration: 9s;
}

.highlights-particles span:nth-child(4) {
    left: 88%;
    top: 60%;
    animation-duration: 13s;
}

.highlights-particles span:nth-child(5) {
    left: 35%;
    top: 15%;
    animation-duration: 10s;
}

.highlights-particles span:nth-child(6) {
    left: 67%;
    top: 82%;
    animation-duration: 12s;
}

.highlights-particles span:nth-child(7) {
    left: 50%;
    top: 10%;
    animation-duration: 7s;
}

.highlights-particles span:nth-child(8) {
    left: 5%;
    top: 82%;
    animation-duration: 14s;
}


@keyframes particleFloat {

    0%,
    100% {

        opacity:
            0.15;

        transform:
            translateY(20px)
            scale(0.7);
    }

    50% {

        opacity:
            1;

        transform:
            translateY(-45px)
            scale(1.4);
    }

}




.hud-corner {

    position:
        absolute;

    width:
        90px;

    height:
        90px;

    z-index:
        3;

    opacity:
        0.55;
}


.hud-corner::before,
.hud-corner::after {

    content:
        "";

    position:
        absolute;

    background:
        var(--highlight-blue);

    box-shadow:
        0 0 10px
        rgba(8,119,209,0.6);
}


.hud-corner-tl {
    top: 35px;
    left: 35px;
}

.hud-corner-tr {
    top: 35px;
    right: 35px;
    transform: rotate(90deg);
}

.hud-corner-bl {
    bottom: 35px;
    left: 35px;
    transform: rotate(-90deg);
}

.hud-corner-br {
    bottom: 35px;
    right: 35px;
    transform: rotate(180deg);
}


.hud-corner::before {

    width:
        90px;

    height:
        1px;

    top:
        0;

    left:
        0;
}


.hud-corner::after {

    width:
        1px;

    height:
        90px;

    top:
        0;

    left:
        0;
}



.school-highlights-content {

    position:
        relative;

    z-index:
        5;

    width:
        min(
            1000px,
            calc(100% - 40px)
        );

    padding:
        70px 0;

    text-align:
        center;
}




.highlights-system-status {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    margin-bottom:
        25px;

	
    color:
        rgba(255,255,255,0.5);

    font-size:
        0.55rem;

    font-weight:
        800;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;
}


.status-dot {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #41ff9a;

    box-shadow:
        0 0 12px
        #41ff9a;

    animation:
        statusBlink
        2s
        ease-in-out
        infinite;
}


@keyframes statusBlink {

    0%,
    100% {
        opacity:
            0.4;
    }

    50% {
        opacity:
            1;
    }

}


.status-line {

    width:
        35px;

    height:
        1px;

    background:
        rgba(255,255,255,0.18);
}



.highlights-eyebrow {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        15px;

    color:
        var(--highlight-gold);

    font-size:
        0.62rem;

    font-weight:
        850;

    letter-spacing:
        0.3em;
}


.highlights-eyebrow i {

    color:
        var(--highlight-blue);

    font-size:
        0.7rem;

    animation:
        signalPulse
        2s
        ease-in-out
        infinite;
}


@keyframes signalPulse {

    0%,
    100% {
        opacity:
            0.4;
    }

    50% {
        opacity:
            1;
    }

}



.highlights-core {

    position:
        relative;

    width:
        230px;

    height:
        230px;

    margin:
        35px auto 30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.hud-ring {

    position:
        absolute;

    border-radius:
        50%;

    border:
        1px solid
        rgba(8,119,209,0.4);
}


.hud-ring-one {

    inset:
        0;

    border-top-color:
        var(--highlight-cyan);

    border-bottom-color:
        rgba(8,119,209,0.1);

    animation:
        hudSpin
        12s
        linear
        infinite;
}


.hud-ring-two {

    inset:
        17px;

    border:
        1px dashed
        rgba(255,210,28,0.35);

    animation:
        hudSpinReverse
        17s
        linear
        infinite;
}


.hud-ring-three {

    inset:
        38px;

    border:
        1px solid
        rgba(22,186,255,0.2);

    box-shadow:
        inset 0 0 20px
        rgba(8,119,209,0.12);

    animation:
        hudPulse
        3s
        ease-in-out
        infinite;
}


@keyframes hudSpin {

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes hudSpinReverse {

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

}


@keyframes hudPulse {

    0%,
    100% {
        transform:
            scale(0.96);

        opacity:
            0.6;
    }

    50% {
        transform:
            scale(1.04);

        opacity:
            1;
    }

}



.hud-orbit-marker {

    position:
        absolute;

    inset:
        7px;

    animation:
        hudSpin
        12s
        linear
        infinite;
}


.hud-orbit-marker span {

    position:
        absolute;

    top:
        -3px;

    left:
        50%;

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--highlight-gold);

    box-shadow:
        0 0 15px
        var(--highlight-gold);
}



.highlights-core-inner {

    position:
        relative;

    z-index:
        3;

    width:
        120px;

    height:
        120px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    border:
        1px solid
        rgba(22,186,255,0.4);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(8,119,209,0.28),
            rgba(2,17,40,0.95)
        );

    box-shadow:
        0 0 35px
        rgba(8,119,209,0.25),

        inset 0 0 25px
        rgba(22,186,255,0.08);
}


.core-icon {

    color:
        var(--highlight-gold);

    font-size:
        1.5rem;

    filter:
        drop-shadow(
            0 0 10px
            rgba(255,210,28,0.5)
        );
}


.core-label {

    color:
        rgba(255,255,255,0.5);

    font-size:
        0.42rem;

    font-weight:
        850;

    letter-spacing:
        0.16em;
}


.coming-soon-display {

    position:
        relative;
}


.coming-line {

    display:
        block;

    margin-bottom:
        10px;

    color:
        rgba(255,255,255,0.38);

    font-size:
        0.5rem;

    font-weight:
        850;

    letter-spacing:
        0.3em;
}


.coming-soon-display h1 {

    margin:
        0;

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            4rem,
            10vw,
            8rem
        );

    line-height:
        0.82;

    letter-spacing:
        -0.08em;

    font-weight:
        900;

    color:
        white;

    text-shadow:
        0 0 20px
        rgba(22,186,255,0.25);
}


.coming-soon-display h1 span {

    display:
        block;

    color:
        transparent;

    -webkit-text-stroke:
        1px
        var(--highlight-cyan);

    text-shadow:
        0 0 25px
        rgba(22,186,255,0.35);

    animation:
        neonFlicker
        4s
        ease-in-out
        infinite;
}


@keyframes neonFlicker {

    0%,
    92%,
    100% {
        opacity:
            1;
    }

    94% {
        opacity:
            0.65;
    }

    96% {
        opacity:
            1;
    }

    98% {
        opacity:
            0.75;
    }

}



.coming-digital-line {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        15px;

    margin:
        25px auto;
}


.coming-digital-line span {

    width:
        100px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--highlight-blue)
        );

    box-shadow:
        0 0 8px
        rgba(8,119,209,0.5);
}


.coming-digital-line span:last-child {

    background:
        linear-gradient(
            90deg,
            var(--highlight-blue),
            transparent
        );
}


.coming-digital-line i {

    color:
        var(--highlight-gold);

    font-size:
        0.65rem;

    filter:
        drop-shadow(
            0 0 8px
            rgba(255,210,28,0.7)
        );
}



.highlights-description {

    max-width:
        680px;

    margin:
        0 auto;

    color:
        rgba(255,255,255,0.55);

    font-size:
        0.78rem;

    line-height:
        1.85;
}


.highlights-description p {

    margin:
        7px 0;
}


.highlights-description strong {

    color:
        rgba(255,255,255,0.88);

    font-weight:
        750;
}




.highlights-future {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        38px auto 35px;

    max-width:
        500px;
}


.future-node {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        8px;

    color:
        rgba(255,255,255,0.3);

    font-size:
        0.45rem;

    font-weight:
        850;

    letter-spacing:
        0.15em;
}


.future-node i {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(255,255,255,0.1);

    border-radius:
        12px;

    font-size:
        0.85rem;
}


.future-node.active {

    color:
        var(--highlight-gold);
}


.future-node.active i {

    border-color:
        rgba(255,210,28,0.5);

    color:
        var(--highlight-gold);

    background:
        rgba(255,210,28,0.05);

    box-shadow:
        0 0 20px
        rgba(255,210,28,0.1);
}


.future-connector {

    width:
        55px;

    height:
        1px;

    margin:
        0 10px 22px;

    background:
        linear-gradient(
            90deg,
            rgba(8,119,209,0.1),
            rgba(8,119,209,0.6),
            rgba(8,119,209,0.1)
        );
}



.highlights-system-code {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    max-width:
        700px;

    margin:
        0 auto;

    padding-top:
        17px;

    border-top:
        1px solid
        rgba(255,255,255,0.07);

    color:
        rgba(255,255,255,0.25);

    font-family:
        monospace;

    font-size:
        0.42rem;

    letter-spacing:
        0.08em;
}


.highlights-system-code i {

    color:
        #41ff9a;

    font-size:
        0.35rem;
}




@media (max-width: 700px) {

    .school-highlights-section {

        min-height:
            calc(100vh - 70px);
    }

    .school-highlights-content {

        padding:
            50px 0;
    }

    .highlights-system-status {

        flex-wrap:
            wrap;

        font-size:
            0.45rem;
    }

    .highlights-core {

        width:
            190px;

        height:
            190px;
    }

    .highlights-core-inner {

        width:
            100px;

        height:
            100px;
    }

    .coming-soon-display h1 {

        font-size:
            clamp(
                3.5rem,
                18vw,
                6rem
            );
    }

    .highlights-description {

        font-size:
            0.72rem;
    }

    .future-connector {

        width:
            25px;

        margin:
            0 5px 22px;
    }

    .highlights-system-code {

        flex-direction:
            column;

        gap:
            8px;
    }

    .hud-corner {

        display:
            none;
    }

}


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

    .highlights-grid,
    .highlights-scanlines,
    .school-highlights-section::before,
    .highlights-particles span,
    .status-dot,
    .highlights-eyebrow i,
    .hud-ring,
    .hud-orbit-marker,
    .coming-soon-display h1 span {

        animation:
            none !important;
    }

}