:root{
  --bg:#0b1f33; --panel:#13314f; --accent:#4aa3ff; --accent2:#5ed3f0;
  --text:#e6f0fa; --muted:#9bb4cc; --border:#2c5077; --green:#5be39a;
}
*{box-sizing:border-box; margin:0; padding:0}
body{
  font-family:"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6;
}
.container{max-width:1000px; margin:0 auto; padding:0 20px}
a{color:var(--accent2); text-decoration:none}

/* Header / Nav */
.topbar{background:var(--panel); border-bottom:1px solid var(--border)}
.nav{display:flex; align-items:center; justify-content:space-between; height:62px}
.logo{font-weight:700; font-size:18px; color:#fff}
.nav nav a{
  color:var(--muted); margin-left:18px; font-size:14.5px;
  padding:6px 4px; transition:.15s;
}
.nav nav a:hover{color:var(--text)}
.nav nav a.active{color:var(--accent); border-bottom:2px solid var(--accent)}

/* Hero */
.hero{
  background:linear-gradient(135deg,#13314f,#1c4068);
  padding:70px 0; text-align:center; border-bottom:1px solid var(--border);
}
.hero h1{font-size:34px; color:#fff; margin-bottom:10px}
.hero p{color:var(--muted); font-size:16px; margin-bottom:22px}
.btn{
  display:inline-block; background:var(--accent); color:#06121f;
  font-weight:700; padding:11px 22px; border-radius:8px; border:none;
  cursor:pointer; font-size:14.5px;
}
.btn:hover{background:var(--accent2)}

/* Cards */
.features{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px; padding:40px 20px;
}
.card{
  background:var(--panel); border:1px solid var(--border);
  border-radius:10px; padding:20px;
}
.card h3{color:var(--green); margin-bottom:8px; font-size:17px}
.card p{color:var(--muted); font-size:14px}
code{background:#071624; padding:2px 6px; border-radius:4px; color:var(--accent2)}

/* Generic page */
.page{padding:40px 20px}
.page h1{color:#fff; margin-bottom:14px}
.page h2{color:var(--green); margin:22px 0 10px; font-size:20px}
.page p{color:var(--muted); margin-bottom:10px}
.page ul{margin-left:22px; color:var(--muted)}
.page li{margin:5px 0}

/* Contact form */
.contact-form{max-width:460px; margin:14px 0 10px}
.contact-form label{display:block; margin-bottom:12px; color:var(--text); font-size:14px}
.contact-form input,.contact-form textarea{
  width:100%; margin-top:5px; padding:9px 11px;
  background:#071624; border:1px solid var(--border);
  border-radius:6px; color:var(--text); font-family:inherit;
}

/* Footer */
.footer{
  background:var(--panel); border-top:1px solid var(--border);
  padding:20px 0; text-align:center; color:var(--muted); font-size:13px;
  margin-top:30px;
}