* {
box-sizing:border-box;
}


body {

margin:0;

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

background:#061421;

color:#e8f1f7;

}



.container {

max-width:1100px;

margin:auto;

padding:0 25px;

}



header {

background:#061421;

padding:25px 0;

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

}



.header-inner {

display:flex;

align-items:center;

gap:15px;

}



.logo {

width:45px;

}



.brand {

font-size:26px;

font-weight:700;

}





.hero {

padding:90px 0;

background:
radial-gradient(
circle at top right,
#12395a,
#061421 55%
);

}



.hero-panel {

max-width:800px;

}



h1 {

font-size:64px;

margin:0 0 20px;

}



h2 {

font-size:36px;

line-height:1.3;

}



.hero h2 {

font-weight:400;

}



p {

font-size:18px;

line-height:1.7;

color:#b7cad8;

}





.button {

display:inline-block;

margin-top:25px;

padding:16px 32px;

background:#29a9e8;

color:white;

border-radius:8px;

text-decoration:none;

border:none;

font-size:16px;

cursor:pointer;

}





.section {

padding:80px 0;

}



.dark {

background:#0d2235;

}





.grid {

display:grid;

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

gap:20px;

margin-top:40px;

}



.item,
.card,
.features div {


background:#132c42;

padding:25px;

border-radius:12px;

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

}



.card h3,
.features h3 {

color:#29a9e8;

}




form {

max-width:500px;

display:flex;

flex-direction:column;

gap:15px;

margin-top:30px;

}



input,
textarea {

background:#061421;

border:1px solid #28445c;

padding:15px;

color:white;

border-radius:6px;

font-size:16px;

}


textarea {

height:120px;

}





footer {

padding:30px 0;

background:#030b12;

color:#8da5b8;

}





@media(max-width:800px){


h1 {

font-size:42px;

}


.grid {

grid-template-columns:1fr;

}


}