:root {


    --bg: #090D10;

    --panel: #10161B;

    --border: #29353D;

    --text: #E8F0F3;

    --muted: #81919A;

    --green: #52F28F;


}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {


    background:

        var(--bg);


    color:

        var(--text);


    font-family:

        "Courier New",
        monospace;


}



.grid-bg {


    min-height: 100vh;


    background-color:

        var(--bg);



    background-image:


        linear-gradient(rgba(255, 255, 255, .045) 1px,
            transparent 1px),


        linear-gradient(90deg,
            rgba(255, 255, 255, .045) 1px,
            transparent 1px);



    background-size:

        28px 28px;


}




.container {


    width: min(1200px, 90%);

    margin: auto;


}





/* HEADER */


.site-header {


    position: sticky;

    top: 0;

    z-index: 999;


    background:

        rgba(9, 13, 16, .95);


    border-bottom:

        1px solid var(--border);


}



.header-inner {


    width: min(1200px, 90%);

    margin: auto;


    min-height: 90px;


    display: flex;

    align-items: center;

    justify-content: space-between;


    gap: 30px;


}



.brand-title {


    font-family:

        Arial,
        Helvetica,
        sans-serif;


    font-size: 20px;

    font-weight: 900;


    letter-spacing: .08em;


}



.brand-sub {


    font-size: 10px;


    color:

        var(--muted);


    letter-spacing: .25em;


    margin-top: 5px;


}



.nav {


    display: flex;


    gap: 30px;


}



.nav a {


    color:

        var(--text);


    text-decoration: none;


    font-size: 12px;


    letter-spacing: .15em;


}



.nav a:hover {


    color:

        var(--green);


}




.header-status {


    color:

        var(--green);


    font-size: 12px;


    letter-spacing: .12em;


}



.header-btn {


    background:

        var(--green);


    color: #061008;


    padding: 14px 22px;


    text-decoration: none;


    font-size: 12px;


    letter-spacing: .12em;


}




.status-dot {


    display: inline-block;


    width: 9px;

    height: 9px;


    background:

        var(--green);


    border-radius: 50%;


    margin-right: 8px;


}





/* HERO */


.hero {


    padding:

        100px 0 60px;


}



.system-label {


    color:

        var(--green);


    font-size: 12px;


    letter-spacing: .18em;


    margin-bottom: 25px;


}



h1 {


    font-family:

        Arial,
        Helvetica,
        sans-serif;


    font-size:

        clamp(60px, 8vw, 120px);


    line-height: .9;


    font-weight: 900;


    letter-spacing: -.05em;


}



h1 span {


    color:

        var(--green);


}



.hero p {


    margin-top: 30px;


    max-width: 650px;


    line-height: 1.8;


    color:

        var(--muted);


}





.btn {


    display: inline-block;


    padding: 16px 28px;


    border:

        1px solid var(--green);


    color:

        var(--green);


    text-decoration: none;


    font-size: 12px;


    letter-spacing: .12em;


}



.btn:hover {


    background:

        var(--green);


    color: #061008;


}




.panel {


    background:

        rgba(16, 22, 27, .95);


    border:

        1px solid var(--border);


    padding: 40px;


    margin-bottom: 100px;


}



.status-panel p {


    margin-top: 18px;


}





@media(max-width:900px) {



    .header-inner {


        flex-wrap: wrap;


        padding: 20px 0;


    }



    .nav {


        order: 3;

        width: 100%;

        justify-content: center;

    }



    .header-status {


        display: none;


    }


}




@media(max-width:600px) {


    .header-btn {


        width: 100%;

        text-align: center;


    }



    h1 {


        font-size: 58px;


    }


}

/* =========================================
   HERO TERMINAL MODULE
========================================= */


.hero-grid {


    display: grid;


    grid-template-columns:

        1.3fr .7fr;


    gap: 60px;


    align-items: center;


}



.hero-content p {


    font-size: 16px;


}



.terminal-card {


    background:

        rgba(16, 22, 27, .95);


    border:

        1px solid var(--border);


    padding: 35px;


    min-height: 360px;


    position: relative;


}



.terminal-card::before {


    content: "";


    position: absolute;


    top: -1px;


    left: -1px;


    width: 20px;


    height: 20px;


    border-top:

        2px solid var(--green);


    border-left:

        2px solid var(--green);


}



.terminal-title {


    font-size: 14px;


    letter-spacing: .18em;


    color:

        var(--text);


    font-weight: bold;


}



.terminal-line {


    height: 1px;


    background:

        var(--border);


    margin:

        20px 0;


}



.terminal-item {


    font-size: 13px;


    letter-spacing: .08em;


    margin:

        18px 0;


    display: flex;


    align-items: center;


}



.terminal-data {


    font-size: 12px;


    letter-spacing: .15em;


    color:

        var(--muted);


    line-height: 2;


}



.green-text {


    color:

        var(--green);


}





@media(max-width:900px) {


    .hero-grid {


        grid-template-columns: 1fr;


    }



    .terminal-card {


        margin-top: 30px;


    }



}

/* =========================================
   SYSTEM STATUS MODULE
========================================= */


.status-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

    margin-top: 35px;

}



.status-card {


    background:

        rgba(16, 22, 27, .95);


    border:

        1px solid var(--border);


    padding: 30px;


    position: relative;


}



.status-card::before {


    content: "";


    position: absolute;


    top: -1px;


    left: -1px;


    width: 18px;


    height: 18px;


    border-top: 2px solid var(--green);


    border-left: 2px solid var(--green);


}



.status-number {


    color: var(--green);


    font-size: 12px;


    letter-spacing: .2em;


}



.status-card h3 {


    margin-top: 20px;


    font-size: 20px;


}



.status-card p {


    color: var(--muted);


    line-height: 1.7;


    font-size: 14px;


}



.status-indicator {


    margin-top: 25px;


    font-size: 12px;


    letter-spacing: .15em;


    display: flex;


    align-items: center;


    gap: 10px;


}



@media(max-width:900px) {


    .status-grid {


        grid-template-columns: 1fr;


    }


}

/* SERVICE PROTOCOL HOVER */

.status-card {

    transition:
        transform .25s ease,
        border-color .25s ease;

}


.status-card:hover {

    transform: translateY(-6px);

    border-color: var(--green);

}

/* =========================================
   SERVICE PROTOCOL FOOTER
========================================= */

.protocol-footer {

    margin-top: 35px;

    font-size: 11px;

    letter-spacing: .2em;

    color: var(--muted);

    text-align: center;

}

/* =========================================
   SERVICE MODULES
========================================= */


.service-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

    margin-top: 35px;

}



.service-card {

    display: block;

    text-decoration: none;

    color: inherit;

    background:

        rgba(16, 22, 27, .95);

    border:

        1px solid var(--border);

    padding: 30px;

    position: relative;

    transition: .25s ease;

}



.service-card:hover {

    transform: translateY(-6px);

    border-color: var(--green);

}



.service-card::after {

    content: "OPEN MODULE //";

    position: absolute;

    bottom: 20px;

    right: 25px;

    font-size: 10px;

    letter-spacing: .15em;

    color: var(--muted);

    opacity: 0;

    transition: .25s ease;

}



.service-card:hover::after {

    opacity: 1;

    color: var(--green);

}



.service-number {

    color: var(--green);

    font-size: 12px;

    letter-spacing: .2em;

}



.service-card h3 {

    margin-top: 20px;

    font-size: 20px;

}



.service-card p {

    color: var(--muted);

    line-height: 1.7;

    min-height: 75px;

}



.service-status {

    margin-top: 25px;

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 12px;

    letter-spacing: .15em;

}



@media(max-width:900px) {

    .service-grid {

        grid-template-columns: 1fr;

    }

}

/* =========================================
   SERVICE REQUEST TERMINAL
========================================= */


/* REQUEST PAGE HERO */

.request-hero {

    padding: 90px 0 50px;

}


.request-hero p {

    max-width: 650px;

    color: var(--muted);

    line-height: 1.8;

    margin-top: 30px;

}



/* MAIN FORM PANEL */


.request-panel {

    background:

        rgba(16, 22, 27, .95);

    border:

        1px solid var(--border);

    padding: 45px;

    margin-bottom: 80px;

    position: relative;

}



.request-panel::before {

    content: "";

    position: absolute;

    top: -1px;

    left: -1px;

    width: 25px;

    height: 25px;

    border-top: 2px solid var(--green);

    border-left: 2px solid var(--green);

}



/* FORM SECTIONS */


.form-section {

    padding: 35px 0;

    border-bottom:

        1px solid var(--border);

}



.form-section:last-child {

    border-bottom: none;

}



.form-title {

    color: var(--green);

    font-size: 12px;

    letter-spacing: .2em;

    margin-bottom: 30px;

}





/* INPUT LAYOUT */


.form-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

}





input,
textarea,
select {


    width: 100%;


    background:

        #0b1014;


    border:

        1px solid var(--border);


    padding: 18px;


    color: var(--text);


    font-family:

        "Courier New",
        monospace;


    font-size: 14px;


    outline: none;


    transition: .25s ease;


}



textarea {

    min-height: 140px;

    resize: vertical;

}



input::placeholder,
textarea::placeholder {


    color:

        #59666d;


}



input:focus,
textarea:focus,
select:focus {


    border-color:

        var(--green);


}





label {

    display: block;


    font-size: 11px;


    letter-spacing: .15em;


    color:

        var(--muted);


    margin:

        25px 0 12px;


}





/* VEHICLE STATUS */


.status-options {


    display: flex;


    gap: 20px;


    flex-wrap: wrap;


}



.status-options label {


    border:

        1px solid var(--border);


    padding: 15px 20px;


    margin: 0;


    cursor: pointer;


    transition: .2s ease;


}



.status-options label:hover {


    border-color: var(--green);


}




.status-options input {


    width: auto;


    margin-right: 10px;


}





/* SUBMIT BUTTON */


.submit-btn {


    margin-top: 40px;


    width: 100%;


    padding: 22px;


    background:

        var(--green);


    border: none;


    color: #061008;


    font-family:

        "Courier New",
        monospace;


    font-size: 13px;


    letter-spacing: .2em;


    cursor: pointer;


    transition: .25s ease;


}



.submit-btn:hover {


    background:

        transparent;


    border:

        1px solid var(--green);


    color:

        var(--green);


}





/* MOBILE */


@media(max-width:700px) {


    .request-panel {


        padding: 25px;


    }



    .form-grid {


        grid-template-columns: 1fr;


    }



    .status-options {


        flex-direction: column;


    }


}