* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh;
  font-family: system-ui, 'Segoe UI', sans-serif;
  color: #1d2a3a;
  background: linear-gradient(160deg, #3d6fa8, #1f3b63);
  display: grid; place-items: start center;
  padding: 48px 16px;
}
main { width: 100%; max-width: 560px; }
h1 { margin: 0; font-size: 36px; color: #fff; text-shadow: 0 2px 0 rgba(10, 25, 50, .35); }
.sub { margin: 6px 0 24px; color: #e3eefb; font-size: 16px; }
.sub a { color: #fff; }
.tool {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center;
  padding: 16px; margin-bottom: 12px;
  background: #f4f8fd; border: 3px solid #fff; border-radius: 20px;
  color: inherit; text-decoration: none;
  box-shadow: 0 8px 24px rgba(5, 20, 45, .3);
  transition: transform .1s;
}
.tool:hover { transform: translateY(-2px); }
.ic { font-size: 40px; width: 64px; height: 64px; display: grid; place-items: center; background: #fff; border-radius: 16px; }
.info { display: block; }
.nm { display: block; font-size: 20px; font-weight: 700; }
.ds { display: block; font-size: 14px; color: #52637a; margin-top: 2px; line-height: 1.3; }
.go { font-weight: 700; color: #fff; background: #2f7de1; padding: 8px 14px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 420px) {
  .tool { grid-template-columns: 48px 1fr; }
  .ic { width: 48px; height: 48px; font-size: 30px; }
  .go { grid-column: 1 / -1; justify-self: end; }
}