body{
  margin:0;
  background:#02090d;
  color:#eafcff;
  font-family:Arial, sans-serif;
}
.topbar{
  height:54px;
  display:flex;
  align-items:center;
  padding:0 24px;
  background:#01070b;
  border-bottom:1px solid #075466;
}
.brand{
  font-family:Consolas, monospace;
  font-size:22px;
  color:#8ccfff;
  margin-right:auto;
}
.brand span{
  color:#fff;
  font-weight:900;
  text-shadow:0 0 12px #00d7ff;
}
.nav{
  display:flex;
  gap:22px;
  font-family:Consolas, monospace;
  font-weight:800;
  font-size:15px;
}
.nav a{color:#fff;text-decoration:none}
.hero{
  text-align:center;
  padding:28px 20px 16px;
}
.hero h1{
  margin:0;
  font-family:Impact, Arial Black, sans-serif;
  font-size:46px;
  letter-spacing:2px;
  color:white;
  text-shadow:0 0 18px rgba(0,215,255,.45);
}
.grid{
  padding:18px 30px 40px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.card{
  min-height:360px;
  background:linear-gradient(180deg,#071c27,#031017);
  border:1px solid rgba(0,215,255,.38);
  border-radius:8px;
  padding:16px;
  box-shadow:0 0 28px rgba(0,215,255,.12), inset 0 0 30px rgba(0,215,255,.06);
}
.card h2{
  color:#ffc533;
  text-align:center;
  font-family:Consolas, monospace;
  letter-spacing:2px;
  font-size:20px;
}
.card h2:after{
  content:"";
  display:block;
  height:1px;
  margin:14px 0 18px;
  background:linear-gradient(90deg,transparent,#00d7ff,transparent);
}
.visual{
  height:230px;
  border:1px solid rgba(0,215,255,.2);
  background:#020b10;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#5f87c7;
  font-family:Consolas, monospace;
  letter-spacing:3px;
  text-align:center;
}
.footer{
  margin-top:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.footer span{color:#e9fbff}
.footer a{
  color:#00e6ff;
  border:1px solid rgba(0,215,255,.65);
  padding:7px 12px;
  text-decoration:none;
  border-radius:5px;
}
@media(max-width:1100px){.grid{grid-template-columns:1fr 1fr}.nav{gap:10px;font-size:13px}}
@media(max-width:760px){.grid{grid-template-columns:1fr}.topbar{height:auto;flex-direction:column;padding:12px}.nav{flex-wrap:wrap}.hero h1{font-size:32px}}