:root{
  --bg:#0b1020; --panel:#101835; --text:#e9eefb;
  --brand:#4d6bff; --accent:#ff9933; --muted:#97a3ff66;
  --border:#1b2655; --radius:16px; --space:16px;
  --shadow:0 10px 40px rgba(0,0,0,.35);
}

/* Cosmic canvas sits behind everything */
#bg{
  position:fixed; inset:0; width:100vw; height:100vh; display:block;
  z-index:-1;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
}

a{color:#c9d4ff;text-decoration:none}
img{max-width:100%;display:block}

.container{max-width:1120px;margin:auto;padding:calc(var(--space)*2) var(--space)}

.nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 20px;background:#0f1530;position:sticky;top:0;
  border-bottom:1px solid var(--border); z-index:10;
}
.nav .logo{font-weight:800}
.nav a{margin-left:16px}

.hero{
  padding:96px var(--space) 56px;
  text-align:center;
  background:linear-gradient(180deg,rgba(15,21,48,0),rgba(15,21,48,.35));
}
.hero h1{font-size:44px;margin:0 0 8px}
.hero p{color:#c9d4ffb3;margin:0 0 18px}

.btn{
  display:inline-block; padding:12px 20px; border-radius:12px;
  background:var(--brand); color:#fff; border:0; cursor:pointer;
  box-shadow:0 8px 24px rgba(77,107,255,.35);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 12px 34px rgba(77,107,255,.45) }
.btn.alt{ background:var(--accent) }

.grid{display:grid;gap:var(--space)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}

.card{
  background:rgba(16,24,53,.55);
  border:1px solid rgba(157,177,255,.15);
  border-radius:var(--radius);
  box-shadow:var(--shadow), 0 0 0 1px rgba(77,107,255,.05) inset;
  padding:24px;
  backdrop-filter:saturate(120%) blur(6px);
}

.footer{
  padding:40px 20px; text-align:center; color:var(--muted);
  border-top:1px solid var(--border);
}

input,button,select,textarea{
  width:100%; padding:12px; border-radius:10px;
  border:1px solid var(--border); background:#0c1430; color:#eaefff;
}

.badge{
  display:inline-block; padding:8px 12px; border-radius:999px;
  background:rgba(77,107,255,.15); color:#d8e0ff; font-size:12px; font-weight:600;
  border:1px solid rgba(157,177,255,.18); backdrop-filter:blur(6px);
}

.kv{display:grid;grid-template-columns:160px 1fr;gap:10px;margin:8px 0}

@media (max-width:860px){
  .cols-2,.cols-3{grid-template-columns:1fr}
  .hero h1{font-size:34px}
}
/* Cosmic background canvas */
#bg{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;          /* Always behind UI */
  pointer-events: none; /* clicks pass through */
}