/* =====================================================
   CYBERPUNK COMMAND CENTER
   LAYOUT
===================================================== */

/* ==========================
   APP SHELL

   Two stacked regions: everything except the status bar
   scrolls inside .app-body; .app-status-bar is a normal
   flex sibling below it, not a fixed overlay. This is why
   the status bar no longer needs a manually-measured
   --scrollbar-width offset (see status-bar.css) — any
   scrollbar the page needs lives inside .app-body's own
   box, above the status bar row, never underneath it.
   Mirrors the same fix already made in CyberCore.Blazor's
   MainLayout.razor/layout.css.
========================== */

.app-shell{

    display:flex;

    flex-direction:column;

    height:100vh;

}

.app-body{

    flex:1 1 auto;

    min-height:0;

    overflow-y:auto;

    overflow-x:hidden;

    position:relative;

    /*
        html's own scroll-behavior:smooth (style.css) no
        longer applies once .app-body — not the document —
        is what actually scrolls. Needed here instead so the
        header nav's #section anchor links keep animating.
    */
    scroll-behavior:smooth;

}

.app-status-bar{

    flex:0 0 auto;

}

/* ==========================
   HEADER
========================== */

header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:var(--header-height);

    padding:0 8%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    backdrop-filter:blur(12px);

    background:rgba(5,10,18,.45);

    border-bottom:1px solid rgba(0,247,255,.12);

    z-index:var(--z-header);

}

/* ==========================
   LOGO
========================== */

.logo{

    font-size:1.6rem;

    font-weight:700;

    color:white;

    user-select:none;

}

.logo span{

    color:var(--cyan);

    text-shadow:var(--glow-cyan);

}

/* ==========================
   NAVIGATION
========================== */

nav{

    display:flex;

    align-items:center;

    gap:2rem;

}

nav a{

    position:relative;

    font-size:.95rem;

    letter-spacing:1px;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:0;

    height:2px;

    background:var(--cyan);

    transition:var(--transition);

}

nav a:hover::after{

    width:100%;

}

/* ==========================
   HERO
========================== */

.hero{

    min-height:100vh;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:5rem;

    padding-top:120px;

}

/* ==========================
   LEFT COLUMN
========================== */

.hero-left{

    display:flex;

    flex-direction:column;

    gap:1.5rem;

}

.eyebrow{

    color:var(--cyan);

    letter-spacing:4px;

    font-size:.9rem;

}

.hero-text{

    max-width:620px;

    font-size:1.1rem;

}

.hero-buttons{

    display:flex;

    gap:1rem;

    margin-top:1rem;

}

/* ==========================
   RIGHT COLUMN
========================== */

.hero-right{

    display:flex;

    justify-content:center;

    align-items:center;

}

/* ==========================
   HOLOGRAM PLACEHOLDER
========================== */

#hologram{

    width:420px;

    height:420px;

    border-radius:50%;

    border:1px solid rgba(0,247,255,.25);

    display:flex;

    justify-content:center;

    align-items:center;

    backdrop-filter:blur(20px);

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

    box-shadow:

        0 0 50px rgba(0,247,255,.18);

}

.placeholder{

    color:var(--cyan);

    font-family:var(--font-title);

    text-align:center;

    letter-spacing:3px;

}

/* ==========================
   DASHBOARD
========================== */

.dashboard{

    display:grid;

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

    gap:2rem;

}

/* ==========================
   STATS
========================== */

.stats{

    display:grid;

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

    gap:2rem;

    text-align:center;

}

.stat{

    padding:2rem;

}

.stat h2{

    color:var(--cyan);

    font-size:2.6rem;

    margin-bottom:.75rem;

}

/* ==========================
   FOOTER
========================== */

footer{

    padding:3rem 0;

    text-align:center;

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

    margin-top:4rem;

}

footer p{

    font-size:.9rem;

    letter-spacing:2px;

}


/*
    Contact channels
*/

.contact-channels{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:var(--space-md);

    margin:var(--space-lg) 0;

}

.contact-channel{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:.3rem;

    padding:var(--space-sm) var(--space-md);

    border:var(--panel-border);

    border-radius:var(--radius-sm);

    background:var(--panel-bg);

    backdrop-filter:var(--glass-blur);

    color:var(--text-color);

    text-decoration:none;

    transition:
        border-color var(--transition-fast),
        transform var(--transition-fast);

}

.contact-channel:hover{

    border-color:var(--cyan);

    transform:translateY(-4px);

}

.contact-channel-label{

    color:var(--text-muted);

    font-size:.7rem;

    letter-spacing:2px;

    text-transform:uppercase;

}

.contact-channel-value{

    color:var(--cyan);

    font-family:var(--font-body);

    font-size:.95rem;

}

/* ==========================
   RESPONSIVE
========================== */

@media (max-width:980px){

    .hero{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-left{

        align-items:center;

    }

    .hero-text{

        max-width:700px;

    }

    #hologram{

        width:320px;

        height:320px;

    }

    .dashboard{

        grid-template-columns:1fr;

    }

    .stats{

        grid-template-columns:1fr;

    }

}

@media (max-width:700px){

    header{

        flex-direction:column;

        justify-content:center;

        height:auto;

        padding:1rem;

        gap:1rem;

    }

    nav{

        flex-wrap:wrap;

        justify-content:center;

        gap:1rem;

    }

    .hero{

        padding-top:170px;

    }

    h1{

        font-size:clamp(2.5rem,10vw,4rem);

    }

    .hero-buttons{

        flex-direction:column;

        width:100%;

    }

    .hero-buttons button{

        width:100%;

    }

    #hologram{

        width:260px;

        height:260px;

    }

}