body{
  margin:0;
  font-family:Inter,sans-serif;
  background:#0b1220;
  color:#e5e7eb
}
.container{
  width:90%;
  max-width:1200px;
  margin:auto;
  padding:60px 0
}
.header{
  background:#020617;
  border-bottom:1px solid #1e293b
}
.brand{
  font-size:22px;
  font-weight:800;
  letter-spacing:1px;
  color:#38bdf8
}
.brand span{
  color:#e5e7eb
}
.nav a{
  margin-left:24px;
  text-decoration:none;
  color:#94a3b8;
  font-weight:600
}
.nav a:hover{color:#38bdf8}
.hero{
  background:radial-gradient(circle at top,#1e293b,#020617);
  text-align:center;
  padding:140px 0
}
.hero h1{
  font-size:3.2rem;
  margin-bottom:16px
}
.hero p{
  max-width:760px;
  margin:auto;
  font-size:1.2rem;
  color:#cbd5f5
}
.btn{
  display:inline-block;
  margin-top:32px;
  background:#38bdf8;
  color:#020617;
  padding:16px 34px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700
}
.section-title{
  font-size:2.2rem;
  margin-bottom:20px;
  color:#38bdf8
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:28px
}
.card{
  background:#020617;
  padding:28px;
  border-radius:20px;
  border:1px solid #1e293b
}
.card h3{color:#38bdf8}
.footer{
  text-align:center;
  padding:32px;
  background:#020617;
  border-top:1px solid #1e293b;
  color:#94a3b8
}
input,textarea{
  background:#020617;
  border:1px solid #1e293b;
  color:#e5e7eb;
  padding:14px;
  border-radius:10px;
  font-size:15px
}
form{max-width:600px}