body {

margin:0;
font-family:Arial, Helvetica, sans-serif;

background:linear-gradient(
180deg,
#071a2f,
#0a2b4d
);

color:white;

}


.container{

max-width:900px;
margin:auto;
padding:40px 20px;

}


.hero{

text-align:center;
margin-bottom:60px;

}


.hero h1{

font-size:48px;
margin-bottom:10px;
color:#66d0ff;

}


.hero h2{

font-size:24px;
margin-bottom:20px;
color:#d0d0d0;

}


.hero p{

margin-bottom:25px;
font-size:18px;

}


.button{

background:#2ec4ff;
padding:12px 24px;
border-radius:8px;
text-decoration:none;
color:black;
font-weight:bold;

}


.section{

margin-bottom:60px;

}


.section h2{

margin-bottom:20px;
text-align:center;
font-size:28px;

}


.card{

background:#0f2f54;
padding:25px;
border-radius:10px;
margin-bottom:20px;

}


.grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:20px;

}


.workflow,
.architecture{

text-align:center;
font-size:18px;

}


footer{

margin-top:60px;
text-align:center;
font-size:14px;
color:#aaa;

}


@media(max-width:700px){

.grid{

grid-template-columns:1fr;

}

.hero h1{

font-size:36px;

}

}