@keyframes panGridSmooth {
            0% { transform: translate(0, 0); }
            100% { transform: translate(40px, 40px); }
        }
        .bg-grid::before {
            content: '';
            position: absolute;
            top: -40px; left: -40px; width: calc(100% + 80px); height: calc(100% + 80px);
            background-size: 40px 40px;
            background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                              linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
            animation: panGridSmooth 6s linear infinite;
            z-index: 0;
            pointer-events: none;
        }

        /* Schematic & Texture Elements */
        .bg-dots {
            background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
            background-size: 16px 16px;
        }
        
        .corner-brackets {
            position: relative;
        }
        .corner-brackets::before, .corner-brackets::after {
            content: ''; position: absolute; width: 12px; height: 12px; border: 2px solid #404040; transition: all 0.3s ease; pointer-events: none; z-index: 20;
        }
        .corner-brackets::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
        .corner-brackets::after { bottom: -2px; right: -2px; border-left: none; border-top: none; }
        .group:hover .corner-brackets::before { top: -6px; left: -6px; border-color: #ffffff; }
        .group:hover .corner-brackets::after { bottom: -6px; right: -6px; border-color: #ffffff; }

        .crosshair { position: relative; }
        .crosshair::before, .crosshair::after { content: '+'; position: absolute; color: #404040; font-family: monospace; font-size: 18px; line-height: 1; z-index: 10; font-weight: normal; }
        .crosshair::before { top: -9px; left: -5px; }
        .crosshair::after { bottom: -10px; right: -5px; }

        /* Server Blade Animations */
        @keyframes bladeFloat1 {
            0%, 100% { transform: translateY(-10px); }
            50% { transform: translateY(-40px); }
        }
        @keyframes bladeFloat2 {
            0%, 100% { transform: translateY(40px); }
            50% { transform: translateY(10px); }
        }
        @keyframes bladeFloat3 {
            0%, 100% { transform: translateY(-20px); }
            50% { transform: translateY(10px); }
        }
        .blade-1 { animation: bladeFloat1 7s ease-in-out infinite; }
        .blade-2 { animation: bladeFloat2 9.5s ease-in-out infinite; }
        .blade-3 { animation: bladeFloat3 8.2s ease-in-out infinite; }

        /* Active Nav Link Styling */
        .nav-link.active {
            color: white;
            border-bottom-color: white;
        }
        /* Build nav / watermark gradient (matches .chs-build-watermark__build) */
        .chs-build-watermark__build,
        .nav-link-build {
            color: transparent;
            background: linear-gradient(90deg, #8b7cff 0%, #e093b2 50%, #4ec8b8 100%);
            -webkit-background-clip: text;
            background-clip: text;
        }
        .nav-link-build {
            border-bottom-color: transparent;
            transition: opacity 0.2s ease, filter 0.2s ease;
        }
        .nav-link-build:hover {
            opacity: 0.94;
            filter: brightness(1.08) saturate(1.05);
        }
        .nav-link-build.active {
            color: transparent;
            background: linear-gradient(90deg, #b8a9ff 0%, #f0b8d0 50%, #7ee0d4 100%);
            -webkit-background-clip: text;
            background-clip: text;
            border-bottom-color: #7eb8b0;
        }

        /* Build: colourful section */
        @keyframes buildGradientFlow {
            0% { background-position: 0% 40%; }
            50% { background-position: 100% 60%; }
            100% { background-position: 0% 40%; }
        }
        @keyframes buildFloat {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(2%, -3%) scale(1.05); }
        }
        .build-page {
            --build-cyan: #22d3ee;
            --build-fuchsia: #e879f9;
            --build-amber: #fbbf24;
            --build-rose: #fb7185;
            --build-violet: #a78bfa;
        }
        .build-hero-mesh {
            background:
                radial-gradient(ellipse 80% 60% at 20% 20%, rgba(232, 121, 249, 0.35), transparent 55%),
                radial-gradient(ellipse 70% 50% at 85% 15%, rgba(34, 211, 238, 0.3), transparent 50%),
                radial-gradient(ellipse 60% 70% at 70% 85%, rgba(251, 191, 36, 0.25), transparent 55%),
                radial-gradient(ellipse 50% 40% at 10% 80%, rgba(167, 139, 250, 0.28), transparent 50%),
                linear-gradient(165deg, #12081f 0%, #0c1628 45%, #1a0f24 100%);
            background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 200% 200%;
            animation: none; /* Premium: keep it stable, no drifting */
        }
        .build-blob {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.55;
            animation: none; /* Premium: reduce motion */
            pointer-events: none;
        }
        .build-blob:nth-child(2) { animation-delay: -4s; }
        .build-blob:nth-child(3) { animation-delay: -8s; }
        .build-card-glow {
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.08),
                0 10px 30px -18px rgba(0, 0, 0, 0.55),
                0 0 24px -14px var(--glow, rgba(34, 211, 238, 0.28));
        }
        .build-graphic-card {
            border: 2px solid rgba(255, 255, 255, 0.1);
            background:
                linear-gradient(145deg, rgba(15, 11, 22, 0.95) 0%, rgba(8, 12, 28, 0.85) 100%);
            transition: border-color 0.25s ease, transform 0.25s ease;
        }
        .build-graphic-card:hover {
            border-color: rgba(255, 255, 255, 0.22);
            transform: translateY(-4px);
        }
        .build-graphic-card svg {
            filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.45));
        }

        /* Mobile Menu Transitions */
        #mobile-menu {
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        #mobile-menu.hidden-translate {
            transform: translateX(100%);
        }

        /* Universal Particle Container Styling */
        .particles-container {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 0;
            pointer-events: none;
        }
        body.view-build-active #global-system-status {
            display: none;
        }

        /* Homepage hero: fill viewport below nav, scale content to fit */
        body[data-page="home"] {
            --home-nav-h: 5rem;
        }

        .home-hero {
            height: calc(100svh - var(--home-nav-h));
            height: calc(100dvh - var(--home-nav-h));
            min-height: calc(100svh - var(--home-nav-h));
            min-height: calc(100dvh - var(--home-nav-h));
            display: flex;
            flex-direction: column;
        }

        .home-hero__inner {
            flex: 1;
            min-height: 0;
            width: 100%;
            padding-block: clamp(0.75rem, 2.5svh, 2rem);
            gap: clamp(1rem, 2.5svh, 3rem);
            justify-content: center;
        }

        .home-hero__title {
            font-size: clamp(2rem, 4.5vw + 2.5svh, 6rem);
            margin-bottom: clamp(0.375rem, 1.25svh, 1.5rem);
        }

        .home-hero__subtitle {
            font-size: clamp(1.125rem, 2.5vw + 1.75svh, 3.75rem);
            margin-top: clamp(0.25rem, 0.75svh, 1rem);
        }

        .home-hero__lead {
            font-size: clamp(0.8125rem, 0.5rem + 1.1svh, 1.25rem);
            line-height: 1.45;
            margin-bottom: clamp(0.375rem, 1.25svh, 2rem);
        }

        .home-hero__features {
            font-size: clamp(0.625rem, 0.5rem + 0.65svh, 0.875rem);
            margin-bottom: clamp(0.375rem, 1.25svh, 2rem);
        }

        .home-hero__ctas {
            gap: clamp(0.375rem, 1svh, 1rem);
        }

        .home-hero__availability {
            margin-bottom: clamp(0.125rem, 0.5svh, 0.5rem);
        }

        .home-hero__cta span {
            font-size: clamp(0.875rem, 0.75rem + 0.85svh, 1.125rem);
            padding-block: clamp(0.625rem, 1.1svh, 1rem);
            padding-inline: clamp(1rem, 2vw, 1.5rem);
        }

        .home-hero__visual {
            max-height: calc(100svh - var(--home-nav-h) - 2rem);
            max-height: calc(100dvh - var(--home-nav-h) - 2rem);
        }

        @media (max-height: 720px) {
            .home-hero__features {
                margin-bottom: clamp(0.25rem, 0.75svh, 1rem);
            }

            .home-hero__lead {
                line-height: 1.35;
            }

            .blade-1 { animation-name: bladeFloat1Compact; }
            .blade-2 { animation-name: bladeFloat2Compact; }
            .blade-3 { animation-name: bladeFloat3Compact; }
        }

        @media (max-height: 600px) {
            .home-hero__features {
                display: none;
            }

            .home-hero__lead {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        }

        @media (max-height: 520px) {
            .home-hero__availability {
                display: none;
            }
        }

        @keyframes bladeFloat1Compact {
            0%, 100% { transform: translateY(-4px); }
            50% { transform: translateY(-16px); }
        }
        @keyframes bladeFloat2Compact {
            0%, 100% { transform: translateY(12px); }
            50% { transform: translateY(4px); }
        }
        @keyframes bladeFloat3Compact {
            0%, 100% { transform: translateY(-8px); }
            50% { transform: translateY(4px); }
        }