/* =======================================================
   PROJECT CITADEL
   Mission Control Styles
======================================================= */

:root{

    --status-online:#4ade80;
    --status-testing:#fbbf24;
    --status-planned:#60a5fa;

    --panel-bg:rgba(255,255,255,.035);
    --panel-border:rgba(255,255,255,.08);

}


/* =======================================================
   Hero
======================================================= */

.hero-citadel{

    position:relative;
    overflow:hidden;

}

.hero-project{

    display:inline-block;

    padding:.45rem 1rem;

    margin-bottom:1.25rem;

    border:1px solid rgba(255,255,255,.12);

    border-radius:999px;

    background:rgba(255,255,255,.04);

    font-size:.75rem;

    letter-spacing:.25em;

    text-transform:uppercase;

    color:var(--accent-light);

    backdrop-filter:blur(12px);

}


/* =======================================================
   Mission Brief
======================================================= */

.mission{

    margin-top:5rem;

}

.mission-card{

    position:relative;

    background:var(--panel-bg);

    border:1px solid var(--panel-border);

    border-radius:24px;

    overflow:hidden;

    backdrop-filter:blur(18px);

    box-shadow:
        0 10px 40px rgba(0,0,0,.25);

}

.mission-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.03),
            transparent 35%
        );

    pointer-events:none;

}

.mission-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:1.5rem 2rem;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.mission-header h3{

    margin:0;

    font-family:"Space Grotesk",sans-serif;

    letter-spacing:.15em;

    text-transform:uppercase;

}

.mission-status{

    display:flex;

    align-items:center;

    gap:.65rem;

    font-size:.8rem;

    text-transform:uppercase;

    letter-spacing:.15em;

}

.status-dot{

    width:10px;

    height:10px;

    border-radius:50%;

}

.status-online{

    background:var(--status-online);

    box-shadow:
        0 0 12px var(--status-online);

}

.status-testing{

    background:var(--status-testing);

    box-shadow:
        0 0 12px var(--status-testing);

}

.status-planned{

    background:var(--status-planned);

    box-shadow:
        0 0 12px var(--status-planned);

}

.mission-body{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:3rem;

    padding:2rem;

}

.mission-objective h2{

    margin-bottom:1rem;

}

.mission-objective p{

    line-height:1.9;

    color:var(--text-secondary);

}

.mission-meta{

    display:grid;

    gap:1.25rem;

}

.meta-block{

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

    border-radius:16px;

    padding:1rem 1.25rem;

}

.meta-block h4{

    margin-bottom:.4rem;

    font-size:.75rem;

    letter-spacing:.15em;

    text-transform:uppercase;

    color:var(--accent-light);

}

.meta-block p{

    margin:0;

    color:var(--text-primary);

}


/* =======================================================
   Split Philosophy
======================================================= */

.philosophy{

    margin-top:6rem;

}

.philosophy-grid{

    display:grid;

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

    gap:2rem;

}

.philosophy-card{

    position:relative;

    background:var(--panel-bg);

    border:1px solid var(--panel-border);

    border-radius:24px;

    padding:2rem;

    overflow:hidden;

}

.philosophy-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at top right,
            rgba(124,58,237,.08),
            transparent 45%
        );

    pointer-events:none;

}

.philosophy-card h2{

    margin-bottom:1rem;

}

.philosophy-card p{

    margin-bottom:2rem;

    line-height:1.8;

    color:var(--text-secondary);

}

.role-list{

    display:grid;

    gap:.85rem;

}

.role{

    display:flex;

    align-items:center;

    gap:.85rem;

    padding:.8rem 1rem;

    border-radius:12px;

    background:rgba(255,255,255,.03);

}

.role::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--accent);

    box-shadow:
        0 0 10px var(--accent);

}


/* =======================================================
   Section Headings
======================================================= */

.lab-heading{

    margin-top:6rem;
    margin-bottom:3rem;

}

.lab-heading span{

    display:block;

    margin-bottom:.6rem;

    text-transform:uppercase;

    letter-spacing:.2em;

    font-size:.8rem;

    color:var(--accent-light);

}

.lab-heading h2{

    margin-bottom:1rem;

}

.lab-heading p{

    max-width:65ch;

    color:var(--text-secondary);

    line-height:1.8;

}
/* =======================================================
   Active Systems
======================================================= */

.system-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:2rem;

}

.system-card{

    position:relative;

    overflow:hidden;

    padding:2rem;

    border-radius:22px;

    border:1px solid var(--panel-border);

    background:var(--panel-bg);

    transition:.35s ease;

}

.system-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at top right,
            rgba(124,58,237,.10),
            transparent 45%
        );

    opacity:0;

    transition:.35s ease;

}

.system-card:hover{

    transform:translateY(-8px);

    border-color:rgba(124,58,237,.30);

    box-shadow:0 18px 45px rgba(0,0,0,.35);

}

.system-card:hover::before{

    opacity:1;

}

.system-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:1.5rem;

}

.system-title{

    font-family:"Space Grotesk",sans-serif;

    font-size:1.35rem;

    margin:0;

}

.system-status{

    display:flex;

    align-items:center;

    gap:.5rem;

    font-size:.8rem;

    text-transform:uppercase;

    letter-spacing:.15em;

}

.system-card p{

    color:var(--text-secondary);

    line-height:1.8;

    margin-bottom:1.5rem;

}

.system-footer{

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

    padding-top:1rem;

    font-size:.9rem;

    color:var(--text-secondary);

}



/* =======================================================
   Infrastructure
======================================================= */

.infrastructure{

    margin-top:6rem;

}

.infrastructure-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:1.5rem;

}

.infrastructure-item{

    position:relative;

    padding:2rem;

    border-radius:18px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

}

.infrastructure-item h3{

    margin-bottom:.75rem;

    font-size:1rem;

    letter-spacing:.08em;

}

.infrastructure-item p{

    color:var(--text-secondary);

    line-height:1.7;

}



/* =======================================================
   Blueprint Upgrades
======================================================= */

.blueprint{

    margin-top:6rem;

}

.blueprint-grid{

    display:grid;

    gap:2rem;

}

.blueprint-item{

    position:relative;

    overflow:hidden;

    padding:2rem;

    border-radius:20px;

    border:1px solid rgba(96,165,250,.20);

    background:

        linear-gradient(

            rgba(80,140,255,.03),

            rgba(255,255,255,.02)

        );

}

.blueprint-item::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:

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

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

    background-size:32px 32px;

    pointer-events:none;

}

.blueprint-item h3{

    margin-bottom:.75rem;

}

.blueprint-item p{

    color:var(--text-secondary);

    margin-bottom:1.5rem;

}

.progress{

    width:100%;

    height:10px;

    border-radius:999px;

    overflow:hidden;

    background:rgba(255,255,255,.05);

}

.progress span{

    display:block;

    height:100%;

    border-radius:999px;

    background:linear-gradient(

        90deg,

        var(--accent),

        #60a5fa

    );

}



/* =======================================================
   Engineering Notes
======================================================= */

.lessons{

    margin-top:6rem;

}

.lesson-grid{

    display:grid;

    gap:2rem;

}

.lesson{

    position:relative;

    overflow:hidden;

    padding:2rem;

    border-radius:18px;

    background:rgba(255,255,255,.035);

    border:1px solid rgba(96,165,250,.15);

    backdrop-filter:blur(18px);

    transition:.35s ease;

}

.lesson:hover{

    transform:translateY(-6px);

    border-color:rgba(96,165,250,.35);

    box-shadow:

        0 18px 45px rgba(0,0,0,.35);

}

.lesson::before{

    content:"FIELD NOTE";

    display:block;

    margin-bottom:1rem;

    font-size:.72rem;

    letter-spacing:.25em;

    text-transform:uppercase;

    color:var(--status-planned);

}

.lesson::after{

    content:"";

    position:absolute;

    top:0;

    left:0;

    right:0;

    height:2px;

    background:linear-gradient(

        90deg,

        transparent,

        var(--status-planned),

        transparent

    );

    opacity:.6;

}

.lesson p{

    margin:0;

    line-height:1.9;

    color:var(--text-secondary);

}

.lesson-number{

    display:block;

    margin-top:1.5rem;

    font-size:.75rem;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:rgba(255,255,255,.35);

}
/* =======================================================
   Terminal
======================================================= */

.terminal{

    margin-top:7rem;

    border-radius:20px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.08);

    background:#090909;

}

.terminal-header{

    display:flex;

    align-items:center;

    gap:.5rem;

    padding:1rem 1.25rem;

    background:#111;

}

.terminal-dot{

    width:12px;

    height:12px;

    border-radius:50%;

}

.dot-red{

    background:#ff5f56;

}

.dot-yellow{

    background:#ffbd2f;

}

.dot-green{

    background:#27c93f;

}

.terminal-body{

    padding:2rem;

    font-family:monospace;

    color:#9eff9e;

    line-height:2;

    white-space:pre-line;

}

.cursor{

    display:inline-block;

    width:10px;

    background:#9eff9e;

    margin-left:4px;

    animation:blink 1s infinite;

}

@keyframes blink{

    0%,50%{

        opacity:1;

    }

    51%,100%{

        opacity:0;

    }

}



/* =======================================================
   Responsive
======================================================= */

@media(max-width:900px){

    .mission-body{

        grid-template-columns:1fr;

    }

    .philosophy-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:640px){

    .system-grid,
    .lesson-grid,
    .infrastructure-grid{

        grid-template-columns:1fr;

    }

    .mission-header{

        flex-direction:column;

        align-items:flex-start;

        gap:1rem;

    }

    .hero-project{

        font-size:.65rem;

        letter-spacing:.18em;

    }

}