.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  padding: 12px 18px;
  border-radius: 999px;
  text-decoration:none;
  border: 1px solid var(--line);

  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: .85rem;

  transition: transform .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease);
}

.btn-primary{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.btn-ghost{
  background: transparent;
  color: var(--ink);
}

.btn:hover{ transform: translateY(-1px); }

.card{
  border: 1px solid var(--line);
  border-radius: var(--r2);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: box-shadow .45s var(--ease), transform .45s var(--ease);
}

.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.card-body{
  padding: var(--s4);
}

.card-title{
  font-family: var(--font-display);
  margin: 0 0 6px;
}

.card-text{
  margin: 0;
  color: var(--muted);
}