* {
box-sizing:border-box;
}


html {
scroll-behavior:smooth;
}


body {

margin:0;

font-family:Inter,Arial,sans-serif;

color:#172033;

background:#ffffff;

}



.container {

width:min(1150px,90%);

margin:auto;

}




header {

height:80px;

border-bottom:1px solid #edf0f5;

display:flex;

align-items:center;

}



.nav {

display:flex;

justify-content:space-between;

align-items:center;

}



.logo {

font-size:22px;

font-weight:700;

letter-spacing:-0.5px;

}


.logo span {

color:#2563eb;

margin-left:4px;

}



nav a {

margin-left:35px;

text-decoration:none;

color:#64748b;

font-size:15px;

}



nav a:hover {

color:#2563eb;

}





.hero {

padding:90px 0;

}



.hero-grid {

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}



.badge {

display:inline-block;

padding:8px 16px;

border-radius:30px;

background:#eff6ff;

color:#2563eb;

font-size:14px;

margin-bottom:25px;

}



h1 {

font-size:56px;

line-height:1.1;

letter-spacing:-2px;

margin:0 0 25px;

}



p {

color:#64748b;

line-height:1.7;

}



.hero p {

font-size:18px;

max-width:500px;

}



.button {

display:inline-block;

margin-top:25px;

background:#2563eb;

color:white;

padding:15px 28px;

border-radius:10px;

text-decoration:none;

}





.network-card {

height:420px;

background:#f8fafc;

border-radius:30px;

position:relative;

overflow:hidden;

}



.circle {
position:absolute;
width:340px;
height:340px;
background:radial-gradient(circle at 50% 50%, #dbeafe 0%, #cfe0fb 100%);
border-radius:50%;
left:70px;
top:40px;
}



.server-rack {
position:absolute;
top:125px;
left:155px;
display:flex;
flex-direction:column;
gap:16px;
z-index:2;
}

.server-unit {
width:190px;
height:44px;
background:#ffffff;
border-radius:10px;
display:flex;
align-items:center;
padding:0 14px;
box-shadow:0 12px 28px rgba(15, 23, 42, 0.08);
position:relative;
}

.led {
width:8px;
height:8px;
border-radius:50%;
background:#60a5fa;
margin-right:7px;
flex-shrink:0;
}

.server-unit .led:nth-child(2) {
background:#93c5fd;
}

.server-slots {
height:12px;
flex:1;
margin-left:12px;
border-radius:6px;
background:repeating-linear-gradient(
to right,
#dbe4f0 0px,
#dbe4f0 16px,
transparent 16px,
transparent 22px
);
opacity:0.95;
}




section {

padding:90px 0;

}



h2 {

font-size:38px;

letter-spacing:-1px;

}



.lead {

font-size:18px;

max-width:700px;

}




.stats {

display:flex;

gap:30px;

margin-top:50px;

}



.stats div {

padding:30px;

border:1px solid #edf0f5;

border-radius:20px;

flex:1;

}



.stats strong {

display:block;

font-size:32px;

}



.stats span {

color:#64748b;

}





.gray {

background:#f8fafc;

}




.cards {

display:grid;

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

gap:25px;

}



.card {

background:white;

padding:30px;

border-radius:20px;

box-shadow:0 15px 40px #00000008;

}



.icon {

font-size:32px;

color:#2563eb;

}




.tech {

display:flex;

gap:15px;

flex-wrap:wrap;

margin-top:35px;

}



.tech span {

padding:14px 22px;

border-radius:30px;

background:#f1f5f9;

}





.global {

background:#0f172a;

color:white;

}



.locations {

display:grid;

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

gap:30px;

}



.locations div {

padding:30px;

background:#ffffff12;

border-radius:20px;

}




.contact {

text-align:center;

}



.contact a {

color:#2563eb;

font-size:22px;

}





footer {

padding:30px 0;

border-top:1px solid #edf0f5;

color:#64748b;

}






@media(max-width:900px){

.hero-grid,
.cards,
.locations {

grid-template-columns:1fr;

}


h1 {

font-size:40px;

}


nav {

display:none;

}


.stats {

flex-direction:column;

}

}