:root {
            --steel-blue: #547792;
            --soft-beige: #EFD2B0;
            --deep-navy: #1A3263;
            --system-border: rgba(26, 50, 99, 0.2);
        }

        body {
            font-family: 'Spline Sans', sans-serif;
            background-color: var(--soft-beige);
            color: var(--deep-navy);
            margin: 0;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* CUSTOM UTILITIES */
        .bg-steel { background-color: var(--steel-blue); }
        .bg-navy { background-color: var(--deep-navy); }
        .bg-beige { background-color: var(--soft-beige); }
        .text-beige { color: var(--soft-beige); }
        .text-navy { color: var(--deep-navy); }
        .border-navy { border-color: var(--deep-navy); }

        /* COMMAND BAR (HEADER) */
        header {
            border-bottom: 1px solid var(--system-border);
            height: 60px;
        }
        .status-line {
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--steel-blue), transparent);
            flex-grow: 1;
            margin: 0 2rem;
            opacity: 0.5;
        }

        /* SYSTEM BOOT ANIMATION */
        @keyframes scanline {
            0% { transform: translateY(-100%); }
            100% { transform: translateY(100%); }
        }
        .scanline {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 2px;
            background: rgba(84, 119, 146, 0.1);
            animation: scanline 4s linear infinite;
            pointer-events: none;
        }

        /* PANEL NAVIGATION */
        .page-panel {
            display: none;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }
        .page-panel.active {
            display: block;
            opacity: 1;
        }

        /* MENU GRID */
        #system-menu {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 1000;
            background: var(--deep-navy);
            padding: 2rem;
        }
        .menu-grid-item {
            border: 1px solid rgba(239, 210, 176, 0.2);
            transition: all 0.3s ease;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.2em;
        }
        .menu-grid-item:hover {
            background: var(--steel-blue);
            color: var(--soft-beige);
            border-color: var(--soft-beige);
        }

        /* SERVICE MODULES */
        .service-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1px;
            background: var(--deep-navy);
            border: 1px solid var(--deep-navy);
        }
        .service-module {
            background: var(--steel-blue);
            padding: 3rem;
            color: var(--soft-beige);
            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            cursor: pointer;
            overflow: hidden;
            position: relative;
        }
        .service-module.expanded {
            grid-column: 1 / -1;
            background: var(--deep-navy);
        }

        /* HORIZONTAL PROCESS */
        .process-container {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 2rem;
            padding: 4rem 2rem;
            scrollbar-width: none;
        }
        .process-container::-webkit-scrollbar { display: none; }
        .process-step {
            min-width: 400px;
            scroll-snap-align: center;
            border: 2px solid var(--deep-navy);
            padding: 3rem;
            position: relative;
        }

        /* SPLIT PANEL SHOWCASE */
        .work-container {
            display: flex;
            height: 80vh;
        }
        .work-text {
            width: 40%;
            overflow-y: auto;
            padding: 4rem;
            border-right: 1px solid var(--system-border);
        }
        .work-images {
            width: 60%;
            overflow-y: auto;
            background: #000;
        }
        .work-img-block {
            height: 100%;
            width: 100%;
            object-fit: cover;
            filter: grayscale(100%);
            transition: filter 0.5s ease;
        }
        .work-img-block:hover { filter: grayscale(0%); }

        /* FOOTER GRID */
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            border-top: 1px solid var(--deep-navy);
        }
        .footer-cell {
            padding: 3rem;
            border-right: 1px solid var(--deep-navy);
            border-bottom: 1px solid var(--deep-navy);
        }

        /* BUTTONS */
        .btn-system {
            background: var(--steel-blue);
            color: var(--soft-beige);
            padding: 1rem 2rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            display: inline-block;
            transition: transform 0.2s;
        }
        .btn-system:hover {
            transform: scale(1.05);
            background: var(--deep-navy);
        }