/* =========================================================
   NEXORAHOST — INFRASTRUCTURE V2
   ========================================================= */

.nxinfra{
    width:min(1280px,100%);
    margin:24px auto 0;
}


/* HERO */

.nxinfra-hero{
    display:grid;

    grid-template-columns:
        minmax(0,1.4fr)
        minmax(340px,.75fr);

    gap:18px;

    margin-bottom:56px;
}


.nxinfra-hero-copy{
    padding:42px;

    border:1px solid #2a3245;
    border-radius:19px;

    background:
        radial-gradient(
            circle at top left,
            rgba(139,108,246,.10),
            transparent 42%
        ),
        #10151f;
}


.nxinfra-eyebrow{
    display:block;

    margin-bottom:12px;

    color:#9e8cf4;

    font-size:9px;
    font-weight:800;

    letter-spacing:.12em;
}


.nxinfra-hero h1{
    max-width:650px;

    margin:0;

    font-size:clamp(30px,5vw,48px);

    line-height:1.1;
}


.nxinfra-hero-copy p{
    max-width:650px;

    margin:16px 0 0;

    color:#8b95aa;

    font-size:12px;
    line-height:1.75;
}


.nxinfra-hero-actions{
    display:flex;
    gap:10px;

    margin-top:26px;
}


/* STATUS */

.nxinfra-hero-status{
    padding:22px;

    border:1px solid #2b3346;
    border-radius:19px;

    background:#111722;
}


.nxinfra-status-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding-bottom:18px;

    border-bottom:1px solid #293145;
}


.nxinfra-status-head>div>span{
    display:block;

    color:#7f899e;

    font-size:8px;

    letter-spacing:.08em;
}


.nxinfra-status-head>div>strong{
    display:block;

    margin-top:5px;

    font-size:15px;
}


.nxinfra-live{
    display:flex;
    align-items:center;
    gap:6px;

    color:#76c991;

    font-size:9px;
}


.nxinfra-live i{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#62cf8c;

    box-shadow:
        0 0 0 4px rgba(98,207,140,.08);
}


.nxinfra-status-grid{
    display:grid;

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

    gap:10px;

    margin-top:18px;
}


.nxinfra-status-grid>div{
    min-height:90px;

    padding:14px;

    border:1px solid #293145;
    border-radius:12px;

    background:#0e131d;
}


.nxinfra-status-grid span{
    display:block;

    color:#7d879b;

    font-size:8px;

    text-transform:uppercase;
}


.nxinfra-status-grid strong{
    display:block;

    margin-top:7px;

    font-size:21px;
}


.nxinfra-status-grid small{
    color:#758095;

    font-size:8px;
}


/* SECTION */

.nxinfra-section{
    margin-bottom:58px;
}


.nxinfra-heading{
    max-width:700px;

    margin-bottom:22px;
}


.nxinfra-heading>span{
    display:block;

    margin-bottom:7px;

    color:#8f7fe0;

    font-size:8px;
    font-weight:800;

    letter-spacing:.11em;
}


.nxinfra-heading h2{
    margin:0;

    font-size:25px;
}


.nxinfra-heading p{
    margin:8px 0 0;

    color:#838da2;

    font-size:11px;
    line-height:1.6;
}


/* TECH */

.nxinfra-tech-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:13px;
}


.nxinfra-tech-card{
    min-height:245px;

    padding:20px;

    border:1px solid #293145;
    border-radius:15px;

    background:#111722;

    transition:
        transform .15s ease,
        border-color .15s ease;
}


.nxinfra-tech-card:hover{
    transform:translateY(-2px);

    border-color:#414a61;
}


.nxinfra-tech-icon{
    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    margin-bottom:19px;

    border:1px solid #443b69;
    border-radius:11px;

    background:#191629;
    color:#ad9bf5;

    font-size:8px;
    font-weight:800;
}


.nxinfra-tech-card h3{
    margin:0;

    font-size:14px;
}


.nxinfra-tech-card p{
    min-height:83px;

    margin:9px 0 0;

    color:#858fa4;

    font-size:10px;
    line-height:1.65;
}


.nxinfra-tech-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;

    margin-top:16px;
}


.nxinfra-tech-tags span{
    padding:5px 7px;

    border:1px solid #343c50;
    border-radius:999px;

    color:#8e98ac;

    font-size:7px;
}


/* ARCHITECTURE */

.nxinfra-architecture{
    padding:30px;

    border:1px solid #293145;
    border-radius:18px;

    background:#10151f;
}


.nxinfra-arch-node{
    min-width:190px;

    padding:15px;

    border:1px solid #30384c;
    border-radius:12px;

    background:#131925;

    text-align:center;
}


.nxinfra-arch-node.main{
    width:min(300px,100%);

    margin:auto;

    border-color:#574894;
}


.nxinfra-arch-node.security{
    width:min(390px,100%);

    margin:auto;

    border-color:#4f466d;

    background:#161522;
}


.nxinfra-arch-node span{
    display:block;

    color:#8577cf;

    font-size:7px;
    font-weight:800;
}


.nxinfra-arch-node strong{
    display:block;

    margin-top:6px;

    font-size:11px;
}


.nxinfra-arch-node small{
    display:block;

    margin-top:4px;

    color:#778197;

    font-size:8px;
}


.nxinfra-arch-line{
    width:1px;
    height:31px;

    margin:auto;

    background:#394157;
}


.nxinfra-arch-platform,
.nxinfra-services{
    display:grid;

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

    gap:12px;
}


.nxinfra-services article{
    padding:17px;

    border:1px solid #2e364a;
    border-radius:12px;

    background:#111722;

    text-align:center;
}


.nxinfra-services span{
    display:block;

    color:#8677cd;

    font-size:7px;
    font-weight:800;
}


.nxinfra-services strong{
    display:block;

    margin-top:6px;

    font-size:11px;
}


.nxinfra-services small{
    display:block;

    margin-top:4px;

    color:#788297;

    font-size:8px;
}


/* PLATFORM */

.nxinfra-platform-grid{
    display:grid;

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

    gap:13px;
}


.nxinfra-platform-grid article{
    padding:20px;

    border:1px solid #293145;
    border-radius:14px;

    background:#111722;
}


.nxinfra-platform-top{
    display:flex;
    align-items:center;
    gap:11px;
}


.nxinfra-platform-top span{
    width:28px;
    height:28px;

    display:grid;
    place-items:center;

    border:1px solid #453c6a;
    border-radius:8px;

    color:#aa98ef;

    font-size:8px;
    font-weight:800;
}


.nxinfra-platform-top strong{
    font-size:12px;
}


.nxinfra-platform-grid p{
    margin:12px 0 0;

    color:#838da2;

    font-size:10px;
    line-height:1.6;
}


/* MONITOR */

.nxinfra-monitor{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(360px,.8fr);

    gap:20px;

    margin-bottom:58px;

    padding:27px;

    border:1px solid #2b3346;
    border-radius:17px;

    background:#111722;
}


.nxinfra-monitor-copy>span{
    display:block;

    color:#9180df;

    font-size:8px;
    font-weight:800;

    letter-spacing:.1em;
}


.nxinfra-monitor-copy h2{
    margin:8px 0 0;

    font-size:23px;
}


.nxinfra-monitor-copy p{
    max-width:600px;

    margin:10px 0 0;

    color:#838da2;

    font-size:10px;
    line-height:1.65;
}


.nxinfra-monitor-list{
    display:grid;
}


.nxinfra-monitor-list>div{
    display:grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:center;

    gap:9px;

    padding:11px 0;

    border-bottom:1px solid #293145;
}


.nxinfra-monitor-list>div:last-child{
    border-bottom:0;
}


.nxinfra-monitor-list i{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#5dce89;
}


.nxinfra-monitor-list span{
    font-size:10px;
}


.nxinfra-monitor-list strong{
    color:#8f99ad;

    font-size:8px;
}


/* CTA */

.nxinfra-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:30px;

    padding:30px;

    border:1px solid #55478c;
    border-radius:17px;

    background:
        linear-gradient(
            135deg,
            #19162b,
            #111722
        );
}


.nxinfra-cta>div:first-child>span{
    color:#9e8deb;

    font-size:8px;
    font-weight:800;

    letter-spacing:.1em;
}


.nxinfra-cta h2{
    margin:8px 0 0;

    font-size:22px;
}


.nxinfra-cta p{
    margin:8px 0 0;

    color:#858fa4;

    font-size:10px;
}


.nxinfra-cta-actions{
    display:flex;
    gap:9px;

    flex:0 0 auto;
}


/* RESPONSIVE */

@media(max-width:1050px){

    .nxinfra-hero{
        grid-template-columns:1fr;
    }

    .nxinfra-tech-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .nxinfra-monitor{
        grid-template-columns:1fr;
    }

}


@media(max-width:720px){

    .nxinfra{
        margin-top:10px;
    }

    .nxinfra-hero-copy{
        padding:27px 22px;
    }

    .nxinfra-tech-grid,
    .nxinfra-platform-grid,
    .nxinfra-arch-platform,
    .nxinfra-services{
        grid-template-columns:1fr;
    }

    .nxinfra-architecture{
        padding:20px 14px;
    }

    .nxinfra-cta{
        align-items:flex-start;
        flex-direction:column;
    }

    .nxinfra-cta-actions{
        width:100%;
    }

    .nxinfra-cta-actions .btn{
        flex:1;
    }

}


@media(max-width:480px){

    .nxinfra-status-grid{
        grid-template-columns:1fr;
    }

    .nxinfra-tech-grid{
        grid-template-columns:1fr;
    }

    .nxinfra-hero-actions,
    .nxinfra-cta-actions{
        flex-direction:column;
    }

    .nxinfra-hero-actions .btn,
    .nxinfra-cta-actions .btn{
        width:100%;
    }

}



/* =========================================================
   INFRASTRUCTURE PAGE HEADER
   ========================================================= */

.nxinfra-page-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:30px;

    margin-bottom:22px;
}


.nxinfra-page-head>div:first-child>span{
    display:block;

    margin-bottom:7px;

    color:#907fe0;

    font-size:8px;
    font-weight:800;

    letter-spacing:.12em;
}


.nxinfra-page-head h1{
    margin:0;

    font-size:30px;
    line-height:1.15;
}


.nxinfra-page-head p{
    margin:7px 0 0;

    color:#838da2;

    font-size:10px;
}


/* GLOBAL STATUS */

.nxinfra-global-status{
    min-width:190px;

    display:grid;

    grid-template-columns:
        auto minmax(0,1fr);

    align-items:center;

    gap:10px;

    padding:11px 14px;

    border:1px solid #30384c;
    border-radius:12px;

    background:#111722;
}


.nxinfra-global-status>i{
    width:9px;
    height:9px;

    border-radius:50%;

    background:#717b8f;
}


.nxinfra-global-status span{
    display:block;

    color:#778197;

    font-size:7px;

    text-transform:uppercase;
}


.nxinfra-global-status strong{
    display:block;

    margin-top:3px;

    font-size:9px;
}


/* OK */

.nxinfra-global-status.status-ok>i,
.nxinfra-live.status-ok>i{
    background:#55d187;

    box-shadow:
        0 0 0 4px rgba(85,209,135,.08);
}


.nxinfra-global-status.status-ok strong,
.nxinfra-live.status-ok{
    color:#6fda9a;
}


/* MAINTENANCE / DEGRADED */

.nxinfra-global-status.status-maintenance>i,
.nxinfra-global-status.status-degraded>i,
.nxinfra-live.status-maintenance>i,
.nxinfra-live.status-degraded>i{
    background:#e3a54b;

    box-shadow:
        0 0 0 4px rgba(227,165,75,.08);
}


.nxinfra-global-status.status-maintenance strong,
.nxinfra-global-status.status-degraded strong,
.nxinfra-live.status-maintenance,
.nxinfra-live.status-degraded{
    color:#e8b463;
}


/* DOWN */

.nxinfra-global-status.status-down>i,
.nxinfra-live.status-down>i{
    background:#e65e69;

    box-shadow:
        0 0 0 4px rgba(230,94,105,.08);
}


.nxinfra-global-status.status-down strong,
.nxinfra-live.status-down{
    color:#ed7b84;
}


@media(max-width:700px){

    .nxinfra-page-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .nxinfra-global-status{
        width:100%;
    }

}