* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Segoe UI", sans-serif;
    color: white;
    background: #020617;
    overflow: hidden;
}

#particles {
    position: fixed;
    inset: 0;
    z-index: -3;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 60px;
    position: relative;
    z-index: 5;
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    text-decoration: none;
    filter:
        drop-shadow(0 0 12px rgba(0, 242, 254, .65))
        drop-shadow(0 0 22px rgba(157, 78, 221, .5));
}

.brand-mark svg {
    width: 50px;
    height: 50px;
}

.nav-links a {
    margin-left: 25px;
    text-decoration: none;
    color: white;
    font-weight: 600;
    transition: opacity .25s ease, text-shadow .25s ease;
}

.nav-links a:hover {
    opacity: .82;
    text-shadow: 0 0 12px rgba(0, 242, 254, .75);
}

.hero {
    height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    gap: 20px;
    position: relative;
    perspective: 1200px;
    isolation: isolate;
}

.hero::before,
.hero::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.hero::before {
    z-index: -2;
    background:
        linear-gradient(rgba(0, 242, 254, .09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 242, 254, .09) 1px, transparent 1px),
        linear-gradient(rgba(80, 130, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80, 130, 255, .045) 1px, transparent 1px);
    background-size: 92px 92px, 92px 92px, 23px 23px, 23px 23px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .84), rgba(0, 0, 0, .5) 58%, rgba(0, 0, 0, .94));
}

.hero::after {
    z-index: -1;
    background:
        linear-gradient(to bottom, transparent 0 58%, rgba(0, 242, 254, .08) 59%, transparent 100%),
        repeating-linear-gradient(to right, transparent 0 34px, rgba(0, 242, 254, .13) 35px 36px);
    transform: perspective(760px) rotateX(68deg) translateY(31vh);
    transform-origin: 50% 100%;
    opacity: .55;
}

.hero h1 {
    font-size: 64px;
    margin: 0;
    position: relative;
    z-index: 3;
    text-shadow:
        0 0 32px rgba(0, 0, 0, .92),
        0 0 22px rgba(0, 242, 254, .12);
}

.subtitle,
.description {
    position: relative;
    z-index: 3;
    text-shadow: 0 0 26px rgba(0, 0, 0, .92);
}

.subtitle {
    font-size: 20px;
    opacity: .85;
}

.description {
    max-width: 650px;
    opacity: .75;
    line-height: 1.6;
}

.visual-panel {
    position: absolute;
    top: 50%;
    z-index: 1;
    pointer-events: none;
    transform-style: preserve-3d;
}

.neural-panel {
    left: 3.2vw;
    width: 470px;
    height: 330px;
    transform: translateY(-47%) perspective(1200px) rotateY(25deg) rotateX(2deg);
    animation: floatPanelLeft 5.8s ease-in-out infinite;
    filter:
        drop-shadow(0 0 20px rgba(0, 242, 254, .78))
        drop-shadow(0 0 42px rgba(0, 242, 254, .38));
}

.neural-shell {
    position: relative;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 52% 48%, rgba(0, 242, 254, .22), transparent 36%),
        linear-gradient(135deg, rgba(6, 18, 40, .84), rgba(3, 7, 18, .5));
    clip-path: polygon(5% 6%, 35% 6%, 42% 13%, 62% 13%, 68% 7%, 94% 7%, 98% 13%, 98% 43%, 93% 50%, 93% 86%, 89% 94%, 11% 94%, 7% 87%, 7% 72%, 3% 66%, 3% 15%);
    box-shadow:
        inset 0 0 36px rgba(0, 242, 254, .3),
        inset 0 0 80px rgba(157, 78, 221, .14),
        0 0 50px rgba(0, 242, 254, .4);
    backdrop-filter: blur(13px);
    overflow: hidden;
}

.neural-shell::before {
    content: "";
    position: absolute;
    inset: 12px;
    background:
        linear-gradient(90deg, transparent 0 47%, rgba(0, 242, 254, .28) 48% 49%, transparent 50%),
        repeating-linear-gradient(0deg, transparent 0 13px, rgba(0, 242, 254, .08) 14px 15px);
    opacity: .55;
    animation: scan 2.9s linear infinite;
}

.neural-shell::after {
    content: "";
    position: absolute;
    inset: auto 16px 14px 16px;
    height: 5px;
    background: linear-gradient(90deg, transparent, #00f2fe, #9d4edd, transparent);
    filter: blur(1px);
    opacity: .8;
}

.tech-frame-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.outer-frame,
.inner-frame,
.bracket {
    fill: none;
    vector-effect: non-scaling-stroke;
}

.outer-frame {
    stroke: #00f2fe;
    stroke-width: 2.8;
    filter: drop-shadow(0 0 14px rgba(0, 242, 254, .95));
}

.inner-frame {
    stroke: rgba(147, 197, 253, .72);
    stroke-width: 1.2;
    stroke-dasharray: 12 7;
    animation: flow 2.8s linear infinite;
}

.bracket {
    stroke: #9d4edd;
    stroke-width: 3;
    stroke-linecap: round;
    filter: drop-shadow(0 0 14px rgba(157, 78, 221, .85));
}

.terminal {
    position: absolute;
    font-family: "Consolas", "Courier New", monospace;
    font-size: 7px;
    line-height: 1.55;
    letter-spacing: .45px;
    color: #a5f3fc;
    text-align: left;
    text-transform: uppercase;
    text-shadow: 0 0 9px rgba(0, 242, 254, .8);
}

.terminal strong {
    display: block;
    font-size: 8px;
    color: #e0f2fe;
    margin-bottom: 8px;
}

.terminal span {
    display: block;
    min-width: 76px;
    height: 8px;
    margin: 3px 0;
    background: linear-gradient(90deg, rgba(0, 242, 254, .72), rgba(0, 242, 254, .05));
    box-shadow: 0 0 8px rgba(0, 242, 254, .4);
}

.terminal-left {
    left: 40px;
    top: 58px;
}

.terminal-right {
    right: 38px;
    top: 62px;
}

.terminal-bottom {
    left: 45px;
    bottom: 48px;
}

.terminal-bottom span {
    width: 130px;
}

.brain-system {
    position: absolute;
    left: 66px;
    top: 38px;
    width: 338px;
    height: 260px;
    overflow: visible;
    filter:
        drop-shadow(0 0 16px rgba(0, 242, 254, .72))
        drop-shadow(0 0 28px rgba(157, 78, 221, .46));
}

.radar-field circle {
    fill: none;
    stroke: #00f2fe;
    stroke-width: 1.2;
    stroke-dasharray: 9 7;
    opacity: .62;
    transform-origin: 180px 136px;
    animation: spin 9s linear infinite;
}

.radar-field circle:nth-child(2) {
    animation-duration: 6.5s;
    animation-direction: reverse;
    opacity: .5;
}

.radar-field circle:nth-child(3) {
    animation-duration: 4.4s;
    opacity: .42;
}

.radar-field path {
    fill: rgba(0, 242, 254, .15);
    transform-origin: 180px 136px;
    animation: spin 5s linear infinite;
}

.neural-web path {
    fill: none;
    stroke: #7dd3fc;
    stroke-width: 1.2;
    stroke-dasharray: 7 7;
    opacity: .66;
    animation: flow 2.2s linear infinite;
}

.neural-web circle {
    fill: #e9d5ff;
    stroke: #00f2fe;
    stroke-width: 1.4;
    filter: drop-shadow(0 0 10px rgba(157, 78, 221, .9));
    animation: pulse 2s ease-in-out infinite;
}

.brain-fill {
    fill: url(#brainCore);
    fill-opacity: .24;
    stroke: url(#brainLine);
    stroke-width: 4.5;
    stroke-linejoin: round;
}

.brain-stem,
.brain-folds {
    fill: none;
    stroke: url(#brainLine);
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.brain-folds {
    stroke-width: 2.4;
    opacity: .9;
    animation: pulse 2.4s ease-in-out infinite;
}

.queue-panel {
    right: 2.4vw;
    width: 560px;
    height: 350px;
    transform: translateY(-50%) perspective(1200px) rotateY(-14deg) rotateX(4deg);
    animation: floatPanelRight 6.2s ease-in-out infinite;
    filter:
        drop-shadow(0 0 20px rgba(0, 242, 254, .68))
        drop-shadow(0 0 42px rgba(157, 78, 221, .28));
}

.queue-title {
    position: absolute;
    right: 92px;
    top: 14px;
    font-size: 14px;
    line-height: 1.05;
    letter-spacing: 1px;
    color: #a5f3fc;
    text-align: left;
    transform: rotate(16deg);
    text-shadow: 0 0 12px rgba(0, 242, 254, .95);
}

.queue-stack {
    position: absolute;
    left: 72px;
    top: 50px;
    width: 170px;
    display: grid;
    gap: 22px;
}

.queue-box {
    position: relative;
    height: 62px;
    padding: 10px 16px 10px 72px;
    border: 1px solid rgba(0, 242, 254, .86);
    background:
        linear-gradient(135deg, rgba(0, 242, 254, .2), rgba(6, 18, 40, .58)),
        repeating-linear-gradient(0deg, transparent 0 8px, rgba(165, 243, 252, .08) 9px 10px);
    clip-path: polygon(10% 0, 100% 0, 100% 74%, 88% 100%, 0 100%, 0 24%);
    box-shadow:
        inset 0 0 20px rgba(0, 242, 254, .26),
        0 0 28px rgba(0, 242, 254, .54);
    color: #a5f3fc;
    transform: skewX(-9deg);
    backdrop-filter: blur(10px);
}

.queue-box::before,
.queue-box::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.queue-box::before {
    left: 17px;
    top: 50%;
    width: 42px;
    height: 42px;
    border: 1px solid currentColor;
    transform: translateY(-50%) skewX(9deg);
    box-shadow:
        inset 0 0 14px currentColor,
        0 0 14px currentColor;
    opacity: .78;
}

.queue-box::after {
    inset: 7px;
    border: 1px solid currentColor;
    opacity: .18;
}

.queue-box strong {
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%) skewX(9deg);
    font-family: "Consolas", "Courier New", monospace;
    font-size: 22px;
    color: white;
    text-shadow: 0 0 15px currentColor;
    z-index: 1;
}

.queue-box span {
    display: block;
    height: 3px;
    margin: 6px 0;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
    opacity: .74;
}

.queue-box span:nth-of-type(1) {
    width: 64px;
}

.queue-box span:nth-of-type(2) {
    width: 45px;
}

.queue-box span:nth-of-type(3) {
    width: 76px;
}

.box-purple {
    color: #d8b4fe;
    border-color: rgba(157, 78, 221, .9);
    background:
        linear-gradient(135deg, rgba(157, 78, 221, .24), rgba(6, 18, 40, .62)),
        repeating-linear-gradient(0deg, transparent 0 8px, rgba(216, 180, 254, .09) 9px 10px);
    box-shadow:
        inset 0 0 22px rgba(157, 78, 221, .34),
        0 0 30px rgba(157, 78, 221, .62);
}

.route-network {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 12px rgba(0, 242, 254, .9));
}

.route {
    fill: none;
    stroke: #7dd3fc;
    stroke-width: 2.4;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 12 10;
    animation: flow 1.6s linear infinite;
}

.route-two {
    stroke: #9d4edd;
    filter: drop-shadow(0 0 10px rgba(157, 78, 221, .9));
}

.route-network circle {
    fill: #67e8f9;
    filter: drop-shadow(0 0 10px rgba(0, 242, 254, 1));
    animation: pulse 1.7s ease-in-out infinite;
}

.admin-node {
    position: absolute;
    right: 24px;
    top: 120px;
    width: 134px;
    height: 128px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid rgba(125, 211, 252, .7);
    background:
        linear-gradient(145deg, rgba(0, 242, 254, .18), rgba(8, 13, 33, .76)),
        radial-gradient(circle at center 38%, rgba(0, 242, 254, .22), transparent 52%);
    clip-path: polygon(12% 0, 88% 0, 100% 13%, 100% 87%, 88% 100%, 12% 100%, 0 87%, 0 13%);
    box-shadow:
        inset 0 0 28px rgba(0, 242, 254, .28),
        0 0 32px rgba(0, 242, 254, .44);
    backdrop-filter: blur(12px);
}

.admin-avatar {
    position: relative;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(0, 242, 254, .92);
    border-radius: 8px;
    box-shadow:
        inset 0 0 16px rgba(0, 242, 254, .25),
        0 0 20px rgba(0, 242, 254, .7);
}

.avatar-head,
.avatar-body,
.avatar-ring {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #9eefff;
    box-shadow: 0 0 18px rgba(0, 242, 254, .95);
}

.avatar-head {
    top: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.avatar-body {
    bottom: 10px;
    width: 36px;
    height: 24px;
    border-radius: 18px 18px 6px 6px;
}

.avatar-ring {
    inset: -7px;
    left: -7px;
    width: auto;
    height: auto;
    border: 1px dashed rgba(0, 242, 254, .75);
    border-radius: 12px;
    background: transparent;
    transform: none;
    animation: spin 9s linear infinite;
}

.admin-node strong,
.admin-node small {
    font-family: "Consolas", "Courier New", monospace;
    text-shadow: 0 0 10px rgba(0, 242, 254, .92);
}

.admin-node strong {
    font-size: 10px;
    letter-spacing: .8px;
}

.admin-node small {
    font-size: 9px;
    color: #a5f3fc;
    letter-spacing: 1.1px;
}

.about {
    max-width: 750px;
    text-align: center;
    margin-top: 10px;
}

.about h2 {
    font-size: 28px;
    margin-bottom: 10px;
}

.about p {
    line-height: 1.6;
    opacity: .8;
}

@keyframes floatPanelLeft {
    0%, 100% {
        transform: translateY(-47%) perspective(1200px) rotateY(25deg) rotateX(2deg);
    }
    50% {
        transform: translateY(calc(-47% - 12px)) perspective(1200px) rotateY(25deg) rotateX(2deg);
    }
}

@keyframes floatPanelRight {
    0%, 100% {
        transform: translateY(-50%) perspective(1200px) rotateY(-14deg) rotateX(4deg);
    }
    50% {
        transform: translateY(calc(-50% - 11px)) perspective(1200px) rotateY(-14deg) rotateX(4deg);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: .68;
    }
    50% {
        opacity: 1;
    }
}

@keyframes scan {
    from {
        transform: translateX(-30px);
    }
    to {
        transform: translateX(30px);
    }
}

@keyframes flow {
    to {
        stroke-dashoffset: -44;
    }
}

@media (max-width: 1300px) {
    .neural-panel {
        left: 1.5vw;
        width: 405px;
        height: 285px;
    }

    .queue-panel {
        right: 1vw;
        width: 455px;
        scale: .9;
    }
}

@media (max-width: 980px) {
    body {
        overflow: auto;
    }

    .navbar {
        padding: 18px 28px;
    }

    .hero {
        min-height: calc(100vh - 80px);
        height: auto;
        padding: 70px 20px 40px;
    }

    .visual-panel {
        display: none;
    }
}