
/* Cyclone Hosting V5 - Segment 4 Network Section */

.v5-network{
    position:relative;
    padding:100px 22px 115px;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 10%, rgba(19,223,255,.14), transparent 34%),
        linear-gradient(180deg,#040a18,#061229);
}

.v5-network-glow{
    position:absolute;
    right:-180px;
    top:70px;
    width:620px;
    height:620px;
    border-radius:50%;
    background:rgba(47,124,255,.22);
    filter:blur(48px);
}

.v5-network-wrap{
    position:relative;
    z-index:2;
    width:min(1240px,100%);
    margin:0 auto;
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:22px;
    align-items:stretch;
}

.v5-map-card,
.v5-network-panel{
    position:relative;
    min-height:540px;
    border-radius:34px;
    overflow:hidden;
    background:
        linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035)),
        radial-gradient(circle at 50% 0%,rgba(19,223,255,.12),transparent 40%);
    border:1px solid rgba(126,218,255,.16);
    box-shadow:0 30px 90px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
}

.v5-map-grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(126,218,255,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(126,218,255,.07) 1px, transparent 1px);
    background-size:52px 52px;
    mask-image:radial-gradient(circle at 50% 50%, black, transparent 78%);
}

.v5-map-orbit{
    position:absolute;
    left:50%;
    top:50%;
    width:76%;
    height:46%;
    transform:translate(-50%,-50%) rotate(-10deg);
    border-radius:50%;
    border:2px solid rgba(19,223,255,.26);
    box-shadow:0 0 35px rgba(19,223,255,.18), inset 0 0 30px rgba(19,223,255,.10);
    animation:v5NetworkPulse 4.4s ease-in-out infinite;
}

.v5-map-line{
    position:absolute;
    left:50%;
    top:50%;
    width:58%;
    height:2px;
    transform-origin:left center;
    background:linear-gradient(90deg,rgba(19,223,255,.0),rgba(19,223,255,.85),rgba(255,210,41,.42),transparent);
    box-shadow:0 0 18px rgba(19,223,255,.52);
    opacity:.72;
}

.v5-map-line.line-one{transform:rotate(-18deg)}
.v5-map-line.line-two{transform:rotate(20deg)}
.v5-map-line.line-three{transform:rotate(156deg)}

.v5-map-node{
    position:absolute;
    display:flex;
    align-items:center;
    gap:7px;
    color:#dff7ff;
    font-weight:950;
}

.v5-map-node span{
    width:16px;
    height:16px;
    border-radius:50%;
    background:#13dfff;
    box-shadow:0 0 20px rgba(19,223,255,.95), 0 0 46px rgba(19,223,255,.36);
    animation:v5NodePulse 2.4s ease-in-out infinite;
}

.node-ny{left:26%;top:37%}
.node-dal{left:34%;top:55%}
.node-la{left:18%;top:57%}
.node-lon{right:30%;top:34%}
.node-fra{right:24%;top:45%}
.node-sin{right:15%;bottom:24%}

.v5-map-center{
    position:absolute;
    left:50%;
    top:50%;
    width:150px;
    height:150px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    display:grid;
    place-items:center;
    text-align:center;
    background:radial-gradient(circle,rgba(19,223,255,.24),rgba(4,12,30,.86));
    border:1px solid rgba(126,218,255,.26);
    box-shadow:0 0 44px rgba(19,223,255,.30);
}

.v5-map-center strong,
.v5-map-center small{
    display:block;
}

.v5-network-panel{
    padding:26px;
}

.v5-network-status{
    display:flex;
    align-items:center;
    gap:10px;
    padding:16px;
    border-radius:22px;
    background:rgba(57,255,138,.08);
    border:1px solid rgba(57,255,138,.20);
    margin-bottom:18px;
}

.v5-location-list{
    display:grid;
    gap:12px;
}

.v5-location-row{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:17px;
    border-radius:20px;
    background:rgba(255,255,255,.052);
    border:1px solid rgba(126,218,255,.13);
}

.v5-location-row strong,
.v5-location-row b{
    display:block;
}

.v5-location-row small{
    display:block;
    color:#9db4cf;
    margin-top:4px;
}

.v5-location-row div:last-child{
    text-align:right;
}

@keyframes v5NetworkPulse{
    0%,100%{opacity:.48;transform:translate(-50%,-50%) rotate(-10deg) scale(.96)}
    50%{opacity:1;transform:translate(-50%,-50%) rotate(-10deg) scale(1.04)}
}

@keyframes v5NodePulse{
    0%,100%{transform:scale(.86);opacity:.72}
    50%{transform:scale(1.15);opacity:1}
}

@media(max-width:1000px){
    .v5-network-wrap{
        grid-template-columns:1fr;
    }
}

@media(max-width:640px){
    .v5-map-card{
        min-height:420px;
    }

    .v5-network-panel{
        min-height:auto;
    }

    .v5-map-center{
        width:120px;
        height:120px;
    }
}
